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

#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; }
     
	
      
	
      
       这里放要显示的内容
      
      
     

 

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