opacity的继承

opacity的继承

纸上得来终觉浅，绝知此事要躬行

大家都知道在css3中增加的新属性opacity——不透明度的设定。

使用了opacity的元素，它的不透明度会被子元素继承。

但是opacity又不同于一般的具有继承的css属性，

如果父元素定义了opacity，那么子元素在定义一个opacity，那么子元素的效果其实是两者的乘积…

有时候我们不希望子元素的透明度改变。下面我们做几个实验试试。




一、网上流传很广的一个方法，是给子元素在给包裹起来，然后设置position为relative或者absolute

老办法还真是只能对付“老浏览器”…….
看来在firefox、chrome和IE9/10/11 下，利用position把子元素脱出文档流这种方法应该是无解了。




二、那我们换个思路，直接给子元素定义opacity:1行不行。

其实是这样的，如果父元素定义了opacity，那么子元素在定义一个opacity，那么子元素的效果其实是两者的乘积…

例如，父元素的opacity:0.5，子元素opacity:0.2，那么子元素实际的opacity=0.5x0.2=0.1

设置了opacity的父元素，此属性一定会被子元素继承。




三、第三种方法：使用css3的另一个属性：background-color:rgba();

以上面的背景色 #37a7d7为例，其rgb写法为：rgb(55,167,215)，两者可以等价交换。

在css3中的rgba()，rgba(55,167,215,0.5)，其中第四项0.5即为不透明度。

是，也不完全是。因为对于使用rgba设置的不透明度，子元素是不会继承的。

但是，IE7、8是不支持rgba()……




四、不设置为子元素