说到透明度,联想到的一定是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;
}
总结:从图上可以看到,给div设置Opacity属性的里面的文本也是半透明的,而给div设置RGBA属性的里面的文本并没有继承透明性。
注:该实例RGBA和Opacity的不透明度取值均为0.5。