小编给大家分享一下CSS透明度之rgba和opacity的区别是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
我们在进行页面布局时,为了给用户呈现不同的效果,经常需要设置透明度,提到透明度很多人第一反应就是CSS中的opacity这个属性,没错,它确实是调节透明度的一种方式。但是,因为opacity这个属性有继承性,有时将不要设为透明的部分变成了透明,所以,我们用另一种样式,即RGBA,接下来就详细讲讲rgba和opacity分别怎么使用,以及rgba和opacity的区别。
一、怎么使用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);}
效果如图:
看看,这个是不是正常了。
以上是CSS透明度之rgba和opacity的区别是什么的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页题目:CSS透明度之rgba和opacity的区别是什么-创新互联
分享路径:https://www.cdcxhl.com/article28/ddhijp.html
成都网站建设公司_创新互联,为您提供响应式网站、网站维护、网页设计公司、用户体验、全网营销推广、虚拟主机
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联