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

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

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

使用了opacity的元素，它的不透明度会被子元素继承。例如：1_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; }

    .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>

效果如下:

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

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

一、

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

例如，我们更改上面例子的代码，2_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; }

    .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下：

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

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

二、

看来在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的父元素，此属性一定会被子元素继承。

三、

第三种方法：使用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

代码：

<!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;

    /*兼容IE7、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！！完美兼容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#

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

  1. Javascript禁止子元素继承父元素的事件

    3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...

  2. jquery如何阻止子元素继承父元素的事件（又称事件冒泡）

    非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行

  3. jQuery如何阻止子元素继承父元素事件？

    <a> <b></b> </a> $("a").click(...); 这种绑定的话,b也会响应一次事件,如何只对a元素绑定事件,而 ...

  4. javascript阻止子元素继承父元素事件

    $('.box').on('click', function (e) { if(e.target == this) { console.log(e.target) } })

  5. css父元素透明度（opacity）对子元素的影响

    首先子元素会继承父元素的透明度: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度. 其次子元素的透明度是基于父元素的透明度计 ...

  6. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  7. Javascript事件模型（二）：Javascript事件的父元素和子元素

    DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...

  8. js 下获取子元素的方法

    笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

  9. 一个样例看清楚JQuery子元素选择器children()和find()的差别

    近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...

随机推荐

  1. 快速理解Kafka分布式消息队列框架

    作者:刘旭晖 Raymond 转载请注明出处 Email:colorant at 163.com BLOG:http://blog.csdn.net/colorant/ ==是什么 == 简单的说,K ...

  2. HDU 5105 Math Problem --数学，求导

    官方题解: f(x)=|a∗x3+b∗x2+c∗x+d|, 求最大值.令g(x)=a∗x3+b∗x2+c∗x+d,f(x)的最大值即为g(x)的正最大值,或者是负最小值.a!=0时, g′(x)=3∗ ...

  3. JS的构造及其事件注意点总结

    一:js的组成 ECMAscript bom dom 类型包括: number boolean  string undefined  object function 二:基本函数作用 parseInt ...

  4. 关于SVN版本分支合并的知识

    分支的合并类型 合并的工作是把主干或者分支上合并范围内的所有改动列出,并对比当前工作副本的内容,由合并者手工修改冲突,然后提交到服务器的相应目录里.如果当前工作副本是主干,则合并的范围是分支上的改动, ...

  5. C++容器的复制

    C++容器的复制不同于Java Java是引用复制,复制的仅仅是对象的引用, 在需要复制容器内对象的副本集合的情况,需要使用Clone方法,而且要注意clone方法的浅拷贝 深拷贝 C++的容器复制 ...

  6. MTK android 工程中如何修改照片详细信息中机型名

    每一个项目的机型名都不相同,因此拍出来的照片需要更改详细信息中的机型名. 那么,具体在哪里修改照片详细信息机型名呢 路径信息:/ALPS.JB3.TDD.MP.V2_TD_xxx/mediatek/c ...

  7. C语言错误： HEAP CORRUPTION DETECTED

    程序源代码: //写文件两种方式(文本文件和二进制文件) #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<std ...

  8. C语言 百炼成钢4

    //题目10:打印楼梯,同时在楼梯上方打印两个笑脸. #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdli ...

  9. JSON与JSONP

    JSON JSON:一种用于在浏览器和服务器之间交换信息的基于文本的轻量级数据格式.是JS对象的字符串表示.例如:‘{''name":"aa","age&quo ...

  10. iOS后台定位实现

    iOS后台定位实现 (2013-01-24 16:43:12)     工作中碰到一个定位的应用场景:app需要在后台运行,实时上传用户地理位置.   苹果对iOS的规范性在提升了app的品质的同时也 ...