冰冰的小屋

路漫漫其修远兮,吾将上下而求索

关于 opacity 透明度子元素继承现象的若干研究以及 hack 方法


原文出处:http://www.cnblogs.com/liu-l/p/3890861.html

【感想】信息时代的信息是有时效性的,今天是确确实实感受到了。互联网资料虽然丰富,但是质量不一,还有大量的跟风雷同,很多人都是随手拷贝过来,根本没有实践。以前端为例,这两年浏览器的迅猛发展,造成很多原有知识的失效。但是网上还是大量充斥了以前失效的解决方案。我觉得,我们应本着实践精神,对任何问题的解决方案进行实际测试。须知:纸上得来终觉浅,绝知此事要躬行。

今天遇到一个关于透明度的问题。

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

使用了 opacity 的元素,它的不透明度会被子元素继承。例如:1_demo.html

代码如下:

效果如下:

 

可以看出,不光 b-DIV 本身透明度改变了,他的子元素的透明度也跟着改变了。

有时候我们不希望子元素的透明度改变,例如上面的例子,我们不希望里面的字也变得透明。下面我们做几个实验试试。

一、

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

例如,我们更改上面例子的代码,2_demo.html

firefox31 下:

 

chrome35 下:

 

IE9-11 下:

 

但是在 IE7、8 下竟然可以:

 

老办法还真是只能对付 “老浏览器”…….

二、

看来在 firefox、chrome 和 IE9/10/11 下,利用 position 把子元素脱出文档流这种方法应该是无解了。

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

例子:3_demo.html

 

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

例如,父元素的 opacity:0.5,子元素 opacity:0.2,那么子元素实际的 opacity=0.5×0.2=0.1

这个大家可以自己尝试下就知道了。

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

三、

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

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

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

例子:4_demo.html

 

 

聪明的你一定马上想到那么

background-color:rgba(55,167,215,0.5);

等价于

background-color:rgb(55,167,215);opacity:0.5;

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

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

四、

通过上面这些方法,我们可以看出来,子元素是必须继承父元素的 opacity。那我们再换个思路,不让它成为子元素呢?例子:5_demo.html

代码:

效果:

 

perfect!!完美兼容 FF31、chrome35、以及 IE7-11。

总结

经过 以上讨论,我们发现纯代码方面除了方法四,其他的都或多或少存在兼容性问题,当然你也可以通过判断浏览器使用 javascript 改变 DOM,这样一来未免得不偿失。

在需要兼容 IE7、8 的情况下,除了方法四,还可以用传统的方法——gif/png 图片……

ps: 以上方法在 IE6 中均不可实现。

 

建议阅读 stackoverflow 上的相关讨论:http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on#

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注