3、元素外层半透明，内层也跟着透明的解决办法【网页切图技巧】

一、现象

如果需要外层半透明，内层就会跟着变成不透明的。无法实现外层半透明，内层不透明。

二、原因

透明度是向下继承的，无法实现内层不继承，只可以改变架构方式来实现这样的结果。计算内层透明度，是外部透明度和内部透明度相乘，例如外层透明度0.5，内层想写成不透明1，最终得到的结果是透明度0.5。

三、解决办法

方案一：可以用position:absolute,做一上一下的两个平行关系的层

方案二：css3中有rgba可以实现（IE9以上浏览器才支持）

HTML代码

<div class="rgba">1. 这里是父元素半透明子元素不透明的效果<p>我是子元素文字</p></div>

<div class="opacity">2. 这里是父元素半透明子元素也半透明的效果<p>我是子元素</p></div>

CSS代码

body{background-color: red;}
div{width: 300px;height: 200px;color: #fff;}
div.rgba{background-color: rgba(0,0,0,0.7);}
div.opacity{background-color:#000;filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity:0.7;opacity: 0.7;margin-top: 20px;}