rgba和opacity的使用 1、opacity 取值在0到1之间,0表示完全透明,1表示完全不透明。。aa{opacity:0。5;} 2、rgba rgba中的R表示红色,G表示绿色,B表示蓝色,三种颜色的值都可以是正整数或百分数。 A表示Alpha透明度,取值01之间,类似opacity。。aa{background:rgba(255,0,0,0。5);}rgba和opacity的区别 rgba()和opacity都能实现透明效果,最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)。 比如,我们写透明的黑色部分都是用opcity(0。5),但这带出来一个问题就是如果你在这一p上写字的话,然后那个字体也会变成透明色。 所以我们要采取rgba的样式写,前面三个数字分别对应r,g,b这三种颜色,第四位的数字对应的是透明的系数。 举例: 给外面一个p红色背景,并设置它的透明度为0。5,给里面的p颜色为绿色,并加上文字。 代码如下:!DOCTYPEhtmlhtmlheadmetacharsetUTF8titletitlestyletypetextcss。a1{width:200height:200background:opacity:0。5;}。a2{width:200height:50background:008000;fontsize:30}styleheadbody今天心情不好bodyhtml 效果如图: 看图显而易见,给外面的p设置了opacity为0。5后,里面的p和文字的透明度都改变了。 这肯定不是我们想要看到的,我们用rgba设置透明度,看看效果,其他代码不变,只将外面p的opacity换成rgba。。a1{width:200height:200background:rgba(255,0,0,0。5);} 效果如图: 看看,这个是不是正常了。 一句话总结: opacity会继承父元素的opacity属性,rgba不会继承。