很多时候设计师为体现一定的效果,都会在网页上增加透明效果,如上图效果一样。
#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>
达到的效果如下图,文本框不再透明了。