dede 大家好，opacity是什么意思相信很多的网友都不是很明白，包括rgba和opacity的区别也是一样，不过没有关系，接下来就来为大家分享关于opacity是什么意思和rgba和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颜色为绿色，并加上文字。
<!DOCTYPEhtml>\n<html>\n<head>\n<metacharset="UTF-8">\n<title></title>\n<styletype="text/css">\n.a1{width:200px;height:200px;background:red;opacity:0.5;}\n.a2{width:200px;height:50px;background:#008000;font-size:30px;}\n</style>\n</head>\n<body>\n<divclass="a1">\n<divclass="a2">今天心情不好</div>\n</div>\n</body>\n</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不会继承。
文章到此结束，如果本次分享的opacity是什么意思和rgba和opacity的区别的问题解决了您的问题，那么我们由衷的感到高兴！
微信扫一扫打赏
支付宝扫一扫打赏
