解决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>

 

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

转载于:https://www.cnblogs.com/275095923/archive/2011/12/13/2285657.html