CSS透明度之rgba和opacity的区别是什么-创新互联

小编给大家分享一下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>

 
  
  
  
 
 
  

   
今天心情不好
  
 

效果如图：

看图显而易见，给外面的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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。