冰剑'blog

昨天在群里看到有人问关于透明层里面内容不透明的问题，正好一个项目有这个东西，就发出来共享一下！
这里要用到css3的opacity属性！
先看看css3的opacity属性的解释：

opacity -- 不透明度
取值: | inherit
: 透明度取值(取值范围[0.0,1.0])
inherit: 继承
初始值: 1(不透明)
继承性: 是
适用于: 所有元素

由于做个项目需要半透明的效果。起初用的这个css
{-moz-opacity:0.6;filter:alpha(opacity=60);}
测试后只兼容firefox和IE，在Safari 里就不透明了，于是网上找了之后又加了这个代码
{opacity: 0.6;}才兼容的所有的浏览器！
备注：-moz-opacity:0.6在firefox3.5里面已经不被支持了。

还有一个问题就是opacity这个属性是有继承性的，即，用它填写的透明度之后，里面的内容也透明了！
[FONT-SIZE=18]点击这里看demo [/FONT-SIZE]
于是想到了这个方法：
用两个div，一个半透明的div置于底层，另外一个div放在这个班透明的上面！
看css代码：

<br/>.opacity {width:420px;height:260px;padding:5px;border:#999 solid 1px;background:#FFF;position:relative; margin:0 auto;}<br/>.opacity img.bg {width:420px;height:260px;margin-top:-1px;position:absolute;z-index:1;}<br/>/*这个是声明opacity下所有div为绝对定位，z-index:10*/<br/>.opacity div {position:absolute;z-index:10;}<br/>/*这个bottombg是透明的背景，z-index:5;*/<br/>.opacity .bottombg {width:420px;height:80px;-moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7;background:#FFF;bottom:4px;left:5px;z-index:5;}<br/>/*这个bottom是不透明的背景，绝对定位z-index:10;*/<br/>.opacity .bottom {width:420px;height:80px;bottom:4px;left:5px;}<br/>

看html代码：

<br/><div class="opacity"><br/>      <img class="bg" src="http://www.xunzou.com/demo/img/opacity.jpg" /><br/>      <div class="bottombg"></div><br/>      <div class="bottom">这里的文字是不透明的。但是，这个背景的透明的</div><br/></div><br/>

[FONT-SIZE=18]点击这里看demo [/FONT-SIZE]