服务时间:8:30-18:00

首页 >web前端网

css透明度怎么设置

发布时间:2022-12-11 19:57 字数:1363字 阅读:98

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="img/镇魂街 .jpg" alt="镇魂街 " />
    </div>
</body>


在box里创建一个img元素

图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="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)仅设置背景颜色的透明效果,而不影响字体颜色。