一个关于透明度继承的问题

取这个标题我很胆怯，因为我始终不敢确定这个到底是不是透明度的继承！但是我没相到更好的标题，那也只能用这个比较形象的标题了。

在前端开发的时候，经常用到板块背景的透明度，

例如这样的结构：

XML/HTML代码

样式

CSS代码

body {
background-image: url(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);
background-repeat: repeat;
}
.div1{ width:200px; height:200px; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}
.div2{ width:100px; height:100px; background: url(http://www.css88.com/images/testbok.png)}

这样里面的容器div2就“继承了”外面容器div1的透明度，也变成了70%的透明。ie6-ie8,ff,及其他都是一样。

这根本不是设计师的本意。设计师只要使背景透明，里面的内容不透明。

那么我是这么解决的：

XML/HTML代码

CSS代码

body {
background-image: url(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);
background-repeat: repeat;
}
.div2{ width:100px; height:100px; background: url(http://www.css88.com/images/testbok.png)}
.div3{ width:200px; height:200px; position:relative; margin-top:10px}
.div4{ position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}

如果你外面的容器高度是不定的，那么只要把div3的高度设置的足够的高度就可以了

这个方法有个很不好的缺点：多了一个空白的div

注：在ie8的bate版下可以这样来解决问题：

XML/HTML代码

CSS代码

body {
background-image: url(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);
background-repeat: repeat;
}
.div1{ width:200px; height:200px; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}
.div2{ width:100px; height:100px; position:relative; background: url(http://www.css88.com/images/testbok.png)}