前言
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>
- // ab 的属性值都小于父元素, 所以有效
- .opacity{
- opacity:.9;
- }
- .a{
- opacity:.6;
- }
- .b{
- opacity:.3;
- }
- //ab 的属性值都大于父元素, 所以无效, 保持和父元素一致
- .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) }
参考链接
MDN-opacity
RGBA 与 opacity 不得不说的故事
来源: http://www.jianshu.com/p/67c9ab3f1a13