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

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

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

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

于是样式需要这样设置

  1. Transp { /* make the div translucent */
  2. opacity: 0.57;    /* Firefox, Safari(WebKit), Opera) 
  3. filter: "alpha(opacity=57)";     /* IE 8 */
  4. filter: alpha(opacity=57);    /* IE 4-7 */
  5. zoom: 1;    /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */  
  6. }

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

设置如下:

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

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


发布日期:

所属分类: Css/Html5 标签: