rgba和opacity的区别
说到透明度,联想到的一定是rgba和opacity啦,但是两者之间有什么区别?我们来弄清楚一下两者之间的区别
RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间。
R:红色值。正整数 | 百分数G :绿色值。正整数 | 百分数B :蓝色值。正整数| 百分数A :透明度。取值0~1之间
此处的a代表透明度,我们再来看看opacity ( ?? ω ?? )y
opacity 属性设置元素的不透明级别。
【rgba和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。
推荐阅读
- 急于表达——往往欲速则不达
- 第三节|第三节 快乐和幸福(12)
- 20170612时间和注意力开销记录
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 对称加密和非对称加密的区别
- 眼光要放高远
- 樱花雨
- 前任
- 2020-04-07vue中Axios的封装和API接口的管理
- 烦恼和幸福