css透明度属性怎么设置(rgba和opacity的透明效果有什么不同)

 分类:div+css教程时间:2023-03-19 07:30:01点击:

css透明度属性怎么设置?有两种方法,第一种使用rgba()设置颜色透明度,语法“background:rgba(R,G,B,A)”;第二种使用opacity属性设置背景透明度,语法“opacity: 透明值;”,取值范围“0.0~1.0”。
一、rgba和opacity的使用方法

1、opacity

取值在0到1之间,0表示完全透明,1表示完全不透明。

.aa{opacity: 0.5;}

2、rgba

rgba中的R表示红色,G表示绿色,B表示蓝色,三种颜色的值都可以是正整数或百分数。

A表示Alpha透明度,取值0~1之间,类似opacity。

.aa{background: rgba(255,0,0,0.5);}

二、rgba和opacity的透明效果有什么不同

rgba()和opacity都能实现透明效果,最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)。

比如,我们写透明的黑色部分都是用opcity(0.5),但这带出来一个问题就是如果你在这一div上写字的话,然后那个字体也会变成透明色。

所以我们要采取rgba的样式写,前面三个数字分别对应r,g,b这三种颜色,第四位的数字对应的是透明的系数。

举例:

给外面一个div红色背景,并设置它的透明度为0.5,给里面的div颜色为绿色,并加上文字。

代码如下:

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 .a1{width: 200px;height: 200px;background: red;opacity: 0.5;} 
 .a2{width: 200px;height: 50px;background: #008000;font-size: 30px;}
 </style>
 </head>
 <body>
 <div class="a1">
 <div class="a2">今天心情不好</div>
 </div>
 </body>
 </html>

效果如图:

看图显而易见,给外面的div设置了opacity为0.5后,里面的div和文字的透明度都改变了。

这肯定不是我们想要看到的,我们用rgba设置透明度,看看效果,其他代码不变,只将外面div的opacity换成rgba。

.a1{width: 200px;height: 200px;background: rgba(255,0,0,0.5);}

效果如图:

看看,这个是不是正常了。

总结:

opacity会继承父元素的 opacity 属性,rgba不会继承。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: