兼容性最好的Div半透明效果代码

Opacity透明滤镜 ，但实际中用法实现效果可能会有差异，怎么也实现不了透明效果。而且曾经也遇到过这样的一个问题，就是把一个层设置了半透明后，层内的文字也跟着半透明了，这是一细小问题，对于前端开发者是一件头痛的事情。

如何设置Div半透明效果，并兼容IE6+ Firefox等，看下面样式：

Yuzi_Class{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6; opacity: 0.6;}

但Firefox 3.5+已不再支持 –moz-opacity 这个属性了，现在都要改用opacity属性。

于是样式需要这样设置

opacity: 0.57;　　  /* Firefox, Safari(WebKit), Opera)

filter: "alpha(opacity=57)";　　   /* IE 8 */

filter: alpha(opacity=57);　　  /* IE 4-7 */

zoom: 1;　　  /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */

Opacity这个是属于CSS3里面的东西了，属于CSS3的标准。然而微软IE8还不支持这一属性。但如果让DIV背景半透明，而DIV中的文字不半透明呢？很简单，只要在文字的容器中加个position:relative就可以了。

设置如下：

<div style="filter:alpha(opacity=50);background:#ffffff;width:600;"><span style="color:yellow">图层背景半透明，字体颜色也半透明</span></div>

<div style="filter:alpha(opacity=50);background:#ffffff;width:600;"><span style="position:relative;color:yellow">图层背景半透明，字体颜色不半透明</span></div>

好了，现在问题终于得到解决了，最简单的Opacity透明方法，如各位还有更好的方法，望分享。 www.Yuzi.me

511遇见