css 透明属性

最近因为工作需要，需要自定义弹窗，并让背景透明。因为自己也是初学者，就碰到了比较经典的问题。

看代码

<div class="top">
    <div class="sub">css opacity attribute!</div>
</div>

以上结构，如果设置top的opacity属性来达到透明效果时，你会发现，里面的元素全部继承了透明的效果，这显然不能达到要求。至少字体总得看的清楚吧。
从网上搜罗了下相关知识点

先给出标准的css透明写法，兼容大部分浏览器

.top {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

上面的几个属性分别是:

• opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox、Safari和 Opera.
• filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
• -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
• -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

上面的例子涉及到透明属性的继承问题

标准的是，当父元素设置了透明属性，其子元素也会跟着继承透明属性，很多会马上想到，把子元素重新设置opacity：1,但是很可惜，这是无效的。有些人为了省时间，可能当子元素里面的内容多少还看得清楚的时候，就这点问题就会忽略不计。当然，也有很多需求是需要完全不透明的内容。

比较有用的一个方法就是，添加多一个div（子元素），这个div和你要显示的内容块是属于兄弟关系，那么给Div和内容块设置绝对定位，然后给div设置透明度，此时的内容块会覆盖在上面，也就模拟了我们所要的效果。

具体写法可参考：css透明继承问题

以上内容部分来自帕兰印象