这里提供了一个快速的解决子元素继承父元素透明度的方法。当然，这个方法不值得推荐，因为需要创建额外的标签，并且看起来有点零乱。但我认为在某些特殊的情况下还是比较有用的，比如，一些元素显示在另一个元素内等等。

首先是一段使HTML元素半透明的CSS样式：



其中针对不同的浏览器有不同的透明度设置方法。具体不在此细说，可以查阅相关资料，或Google之。

CSS透明度的问题

当我们像父元素中添加子元素的时候，就会发现子元素继承了父元素的透明度。而在某些情况下这是我们不希望发生的。即使你重新设置子元素的透明度为不透明，它仍然会继承父元素的透明度。


解决方法

要怎样解决这个问题呢？我们可以使用绝对定位来使这些元素看起来像父子关系。

查看Demo：http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html


你会看到，在上面的Demo中左右两边的元素结构看起来好像是一样的。而其实并非如此。左边的例子是实实在在的父子元素关系，所以父元素的透明度会影响到子元素。而右边的例子其实是使用了绝对定位使它们看起来像父子关系，所以父元素的透明度并没有影响到子元素。

你可以向右边的那个例子中添加更多的元素，并且不会被“父元素”的透明度影响，因为他们根本就不是<div id="alpha_2"></div>的子元素，而是它的兄弟节点，但是使用了绝对定位使它们看起来是它的子元素。

关键点就在设置透明度的元素并非拥有子元素，所以它的透明度属性不会影响到页面上的其他元素。但是，同其他hack方法一样，这种方法也有缺点。

缺点：

这种方法在试图移除父元素透明度对子元素影响的情况下是非常有用的。但是它的缺点限制了它在更多场合下的应用，所以有必要把他们列出来。

1.既然这个元素（设置透明度的元素）不包含任何内容，你必须设置确定的宽度和高度，并且在它所包含内容变化的时候调整尺寸。这个缺点使得在大多数情况下不使用这种hack方法。

2.由于绝对定位的元素并不是“父元素”（指设置了透明度的元素）真正的子元素，要维持这种状况会很困难，尤其是在一些需要继承的项目中。

3.绝对定位元素是在文档流之外的，所以在页面发生变化的时候会发生布局问题。

4.需要一个额外的<div>标签。


翻译完了才发现，外国人写文章真烦人，本来很简单的一件事，说得这么啰嗦。。。

P.S.：要是有翻译得不恰当的地方还请多多指教。


原文地址：http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/