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

 

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

posted @ 2011-12-13 10:08  周尚武  阅读(11918)  评论(1编辑  收藏