Html5 CSS样式设置div背景色透明
今天写H5的时候,加了一个背景图片,但是有几个div是白色的,显然遮挡了背景,超级突兀,下面是设置背景色透明的例子
<div
style="background-color:transparent;"
>
今天写H5的时候,加了一个背景图片,但是有几个div是白色的,显然遮挡了Html5 CSS样式设置div背景色透明&lt;div style="background-color:transparent;"&gt; ....&lt;/div&gt;...
div
背景
透明
常见的有两种方法:
1.通过opacity属性
设置
,取值0~1,0表示
透明
,1表示不
透明
,但是这种方法会把
div
上的内容也同时进行
透明
设置
。
2.通过rgba格式的background-color
设置
,格式为:background-color:rgba(0,0,0,0~1),0表示
透明
,1表示不
透明
。
效果如下:
完整代码如下:
rgba(R,G,B,A);
RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不
透明
度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不
透明
度。
rgba()里的值的介绍:
R:红色值。正整数 (0~255)
G:绿色值。正整数 (0~255)
B:蓝色值...
可以通过
CSS
中的:hover伪类来实现鼠标滑过
div
时改变
背景
颜色的效果。具体实现方法如下:
1. 在
CSS
中定义
div
的
样式
,包括初始
背景
颜色和鼠标滑过时的
背景
颜色。
div
{
background-color: #eee; /* 初始
背景
颜色 */
div
:hover {
background-color: #ccc; /* 鼠标滑过时的
背景
颜色 */
2. 在HTML中使用该
样式
。
<
div
>这是一个
div
</
div
>
这样,当鼠标滑过
div
时,
背景
颜色就会从初始颜色变为鼠标滑过时的颜色。