css透明度

一句话搞定透明背景！
 

.transparent_class {   
      filter:alpha(opacity=50);   
      -moz-opacity:0.5;   
      -khtml-opacity: 0.5;   
      opacity: 0.5;   
}   

1.  

UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.

Here is what each of those CSS properties is for:

• opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
• filter:alpha(opacity=50); This one you need for IE.
• -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
• -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit .

 

css控制透明度倒不麻烦。

filter:alpha(opacity=50); /*IE滤镜，透明度50%*/

-moz-opacity:0.5; /*Firefox私有，透明度50%*/

opacity:0.5;/*其他，透明度50%*/

 

举个例子：通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试

 

#test{

background-color:#0000CC;

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity:0.5;

width:100px ;

height:100px;

}

但是还是会有很多问题，浏览器兼容性问题，等而且IE滤镜的频繁使用会使浏览器的执行效率降低。所以不提倡过多使用。也还有其他方法可以模拟，比如用宽高都是1px的透明png图片覆盖等等。

/**************************************************/

LZ自己举一反三啊，前景色不就是color么

#test{

background-color:#000

}

#test span{

color:#fff;zoom:1 /*触发IE下块级元素*/

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity:0.5;

}

 

<div id="test"><span>前景色透明度</span></div>

LZ看看“前景色透明度”这几个字是不是纯白色，还是白色的50%透明