rgba和opacity的区别

说到透明度，联想到的一定是rgba和opacity啦，但是两者之间有什么区别？我们来弄清楚一下

两者之间的区别

RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。

R：红色值。正整数 | 百分数

G ：绿色值。正整数 | 百分数

B ：蓝色值。正整数| 百分数

A ：透明度。取值0~1之间

此处的a代表透明度，我们再来看看opacity ( •̀ ω •́ )y

opacity 属性设置元素的不透明级别。

value：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

这么看来，两者都是透明度的设置，可是实际用起来却不一样。

经过实战，我们会发现设置了opacity的元素内的子元素们都被影响了，设置了opacity的元素它的子元素都继承了他的设置，透明度都是一样的。

而rgba所设置的透明度，只会影响他自己本身，而其中的子元素不会被其所影响。

例子

这里咱们写两个div，一个用rgba设置，一个用opacity设置，两者用的是同一个颜色（#FF4A00），来看看他们的区别。

.rgba{
    background: rgba(255,74,0,0.5);
    }
.opacity{
    background: #FF4A00;
    opacity: 0.5;
    }

rgba与opacity对比图

总结：从图上可以看到，给div设置Opacity属性的里面的文本也是半透明的，而给div设置RGBA属性的里面的文本并没有继承透明性。

注：该实例RGBA和Opacity的不透明度取值均为0.5。