解决CSS透明度被继承问题

很多时候设计师为体现一定的效果，都会在网页上增加透明效果，如上图效果一样。

#div1{ filter:alpha(opacity:80);opacity=0.8; }

css设置透明度很简单，用上面代码就行了，但不知道你有没有发现，#div1下的的所有子元素都跟着透明了，这往往不是设计师想要的效果。之所以这样，我估计是由于css透明样式被子元素继承导致。

网上有提到很多的解决办法，大多都需要区分不同浏览器进行处理，这些方法我没有去验证，我想到一个较为方便的方法。增加另一个#div0的元素，将他与#div1都设置成绝对布局且位置一致，然后设置#div0的透明度

更新后的代码：

#div0,#div1{

    width:230px;

    height:260px;

    position:absolute;

    right:40px;

    top:45px;

}

#div0{

    background-color:#FFF;

    filter:alpha(opacity=80);

    opacity:0.8;

}

 

<div id="root">

    <div id="div0"></div>

    <div id="div1">这里放要显示的内容</div>

<div>

 

 达到的效果如下图，文本框不再透明了。