假如有这样一个例子：“有一个DIV块，此DIV是黑色半透明的，但此DIV里面的内容要保持原状，不能透明”，那么我们该怎么做呢？
假如HTML部分我们这样写的
<div class="touMingDiv"> <div> <h1>这是透明的层这是透明的层这是透明的层这是透明的层 这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层 </h1> </div> <p> 这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome </p> <img src="bg.jpg"/> </div>
对于CSS我们也许就这样写了
.touMingDiv{
filter:Alpha(opacity=60);
opacity:0.6;
}但经过测试我们发现，不仅div容器半透明了，连div里面的文字和图片都把透明了。由于这些滤镜的属性已经继承给了子元素，所以会出现这种效果。
我们可以用下面这种发法来实现
.touMingDiv{
width:800px;
min-height:300px;
color:#fff;
background:rgba(0,0,0,0.6);
background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/
filter:Alpha(opacity=60);/*只对ie7,ie8有效*/
}
.touMingDiv p,
.touMingDiv div,
.touMingDiv img{
position:relative;
/*或者是absolute，都可以使文字不透明，这样做还是为了
兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/
}注意，上面background:rgba(0,0,0,0.6);只对ie9，ie10，FF，Chrome...等有效，不包括ie6，ie7，ie8，所以有了这几句代码:
background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/ filter:Alpha(opacity=60);/*只对ie7,ie8有效*/
另外还要对子级元素设置relative或者absolute属性，这样才能出现背景透明而背景上面的文字和图片正常显示的效果。
但这里的代码毅然不适合ie6，建议对于ie6就用png图片吧，然后用js做一下处理。
下载本文