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不得不说的故事