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。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 大家好,我是IT修真院北京分院第23期的学员郭婷婷,一枚正直纯洁善良的WEB前端程序员。 今天给大家分享一下,修真...
    茶纸团阅读 652评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • RGBA是什么? 是在RGB<Red(红色) Green(绿色) Blue(蓝色)>的基础上增加了一个通道Alph...
    LemonnYan阅读 606评论 0 0
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 又是一年高考结束,解放了一部分孩子,还有一部分孩子走向了紧张的高三,更有一大部分人即将步入社会。 人就是这么矛盾,...
    撩个爱我的小哥阅读 300评论 0 1