前言
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)
}
参考链接