css透明度怎么设置？rgba（r，g，b，a）是颜色相关属性的属性值，色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。语法如下。
background-color:rgba (r,g,b,a); color:rgba (r,g,b,a);
取值如下。
r：红色值，正整数或百分数。
g：绿色值，正整数或百分数。
b：蓝色值，正整数或百分数。
a：Alpha透明度，取值0～1之间。
【例】制作如图1所示的视频遮罩层。
图1 视频遮罩层
要求：
（1）鼠标指针移动到图片上时，遮罩层出现；
（2）遮罩层上的透明度为0.4；
（3）遮罩层上的文字为不透明。
创建一个div元素，名为box，在box里创建一个img元素，效果如图2所示。代码如下。
<style>
.box img{
width:300px;
}
</style>
<body>
<div class="box">
<img src="/news/img/镇魂街 .jpg" alt="镇魂街 " />
</div>
</body>
图2 在box里创建一个img元素
若想在图片上加遮罩层，在box内创建div元素，相对于box绝对定位，效果如图3所示。CSS代码如下。
.box{
position:relative;
}
.box .cover{
width:300px;
height:50px;
text-align:center;
line-height:50px;
position:absolute;
bottom:0;
color:#ffffff;
}
HTML代码如下。
<body>
<div class="box">
<img src="/news/img/镇魂街 .jpg" alt="镇魂街 " />
<div class="cover">
镇魂街第二季——故人归来
</div>
</div>
</body>
图3 在图片上加遮罩层
将遮罩层cover的背景色设为透明度为0.2的黑色，这一步可以使用opacity和rgba（r，g，b，a）两种方法实现。
不同的是，opacity会将遮罩层的背景和字体颜色都变为半透明，而rgba（r，g，b，a）可以仅改变背景的透明度，而不影响字体颜色。所以，根据字体不透明的要求，选用rgba（r，g，b，a）设置背景色，效果如图4所示。CSS代码如下。
.box .cover{
width:300px;
height:50px;
text-align:center;
line-height:50px;
position:absolute;
bottom:0;
color:#ffffff;
background-color:rgba (0,0,0,0.4);
}
图4 背景半透明
opacity和rgba（r，g，b，a）的区别：
（1）opacity是属性，rgba（r，g，b，a）是属性值；
（2）有opacity属性的元素，其子元素会继承透明属性，rgba（r，g，b，a）没有这种情况；
（3）opacity属性设置整个元素的透明度，包括图片、背景、字体颜色的透明度；rgba（r，g，b，a）则根据应用它的属性，设置对应的透明效果。例如，background-color:rgba（r，g，b，a）仅设置背景颜色的透明效果，而不影响字体颜色。
