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

时间 2019-11-14

标签关于 opacity 透明度元素继承现象若干研究以及 hack 方法栏目软件设计繁體版

原文原文链接

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

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

你们都知道在css3中增长的新属性opacity——不透明度的设定。html

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

代码以下：java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
    body{ background-color: #000; }
    .a{ width: 200px; height: 150px; background-color: #37a7d7; color: #fff; }
    .opacity{ filter:alpha(opacity=50); /*for IE*/opacity: 0.5;/*非IE*/ }
    </style>
</head>
<body>
    <div class="a">我是b-DIV</div>
    <div class="a opacity">我是b-DIV</div>
</body>
</html>

效果以下:css3

能够看出，不光b-DIV自己透明度改变了，他的子元素的透明度也跟着改变了。chrome

有时候咱们不但愿子元素的透明度改变，例如上面的例子，咱们不但愿里面的字也变得透明。下面咱们作几个实验试试。浏览器

1、

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

例如，咱们更改上面例子的代码，2_demo.htmlide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
    body{ background-color: #000; }
    .a{ width: 200px; height: 150px; background-color: #37a7d7; color: #fff; }
    .opacity{ filter:alpha(opacity=50); /*for IE*/opacity: 0.5;/*非IE*/ }
    </style>
</head>
<body>
    <div class="a">
        <div>我是b-DIV</div>
    </div>
    <div class="a opacity">
        <div style="position:relative">我是b-DIV</div><!-- 我是新增代码 -->
    </div>
</body>
</html>

firefox31下:

chrome35下：

IE9-11下：

可是在IE七、8下居然能够：

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

2、

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

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

<div style="position:relative;opacity: 1">我是b-DIV</div>

例子：3_demo.html

实际上是这样的，若是父元素定义了opacity，那么子元素在定义一个opacity，那么子元素的效果实际上是二者的乘积…

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

这个你们能够本身尝试下就知道了。

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

3、

第三种方法：使用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设置的不透明度，子元素是不会继承的。

可是，IE七、8是不支持rgba()…..

4、

经过上面这些方法，咱们能够看出来，子元素是必须继承父元素的opacity。那咱们再换个思路，不让它成为子元素呢？例子:5_demo.html

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
    body{
    background-color: #000;margin: 0;padding: 0;
}
    .noOpacity{
    width: 300px;
    height: 250px;
    background-color: #37a7d7;
    color: #fff;
}
/*上面的是背景对比，如下是方法*/
    .container {
    width: 300px;
    height: 250px;
    color: #fff;
    position:relative;
}
   .content {
    position:relative;
    z-index:5;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
   .background {
    background-color: #37a7d7;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
    /*兼容IE七、8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}
    </style>
</head>
<body>
    <div class="noOpacity">我是用来做对比的</div>
    <div class="container">
        <div class="content">
            <p>我是class为content的DIV</p>
            <p>个人背景是class为background的背景</p>
            <p>经过相对定位和绝对定位，我把class为background的DIV移动到了个人位置。</p>
            <p>同时经过个人较大的z-index浮在了它的上面。 :)</p>
            <p style="text-align:right">——刘龙(liulo)</p>
        </div>
        <div class="background"></div>
    </div>
</body>
</html>

效果：

perfect！！完美兼容FF3一、chrome3五、以及IE7-11。

总结

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

在须要兼容IE七、8的状况下，除了方法四，还能够用传统的方法——gif/png图片……

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

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