rgba与opacity的区别

前言

sdkfh

shdhfk

rgba与opacity的区别,其实说了无数次了,但是我自己在重复一次吧,多多益善。

开门见山

区别就是opacity会继承父元素的 opacity 属性,而rgba设置元素的后代元素不会继承不透明属性

opacity

语法

opacity: value|inherit;

value 取值0~1,0为完全透明,1为完全不透明。默认是继承父元素opacity属性,所以子元素会继承父元素的opacity属性值,从而产生相同的效果。

但是单独设置子元素opacity的值会产生单独的效果,前提是属性值小于等于父元素的属性值,否则修改无效,继承保持父元素的属性值。

<div class='box opacity'>
        opacity
        <div class='a'>opacity
            <div class='b'>opacity</div>
        </div>
</div>
// a、b的属性值都小于父元素,所以有效
.opacity{
    opacity:.9;
}
.a{
    opacity:.6;
}
.b{
    opacity:.3;
}

//a、b的属性值都大于父元素,所以无效,保持和父元素一致
.opacity{
    opacity:.5;
}
.a{
    opacity:.8;
}
.b{
    opacity:1;
}

rgba

语法

rgba(r,g,b,a)

rgba函数在rgb颜色模式基础上增加了alpha通道,alpha通道是不透明度,这样可以在设置颜色的同时去设置透明度。alpha取值在0~1之间。

设置rgba只会对元素本身产生影响,因为无法继承,所以不会对子元素产生影响。

<div class='rgba box'>rgba</div>


.rgba{
    background-color:rgba(0,0,0,.5)
}

参考链接

  1. MDN-opacity
  2. RGBA 与 opacity不得不说的故事
    原文作者:朋友喜欢叫我春哥
    原文地址: https://www.jianshu.com/p/67c9ab3f1a13
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞