CSS的rgba和opacity有什么区别

本篇内容介绍了"CSS的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颜色为绿色，并加上文字。代码如下：

!DOCTYPEhtml>

.a1{width:200px;height:200px;background:red;opacity:0.5;}

.a2{width:200px;height:50px;background:#008000;font-size:30px;}

今天心情不好