[转贴]CSS透明滤镜,支持FF,IE6.0,IE7.0,IE8.0-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_11852/article/details/82244019

本文介绍了如何使用CSS设置不同浏览器的透明度效果，包括IE、Firefox等，并提供了多个示例，如半透明、线型透明及放射透明等。此外还介绍了其他一些CSS滤镜效果及其兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/

IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数。

filter:alpha(opacity=50);-moz-opacity:0.5;
Opacity: 相对于IE。火狐似乎好像不支持。 [color=red]值：以百分比为值，100 表示不透明度为100%；50侧代表不透明度为50%。[/color]
-moz-opacity: 相对于FF，火狐。 [color=red]值：以小数点为值，1 表示不透明度为100%；0.5侧代表不透明度为50%。[/color]
注意：上面的滤镜IE8不支持。因此我们需要用 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 来声明。让IE8强制显示为IE7效果。

基本上可以完美解决！以下滤镜，在FF里面不支持的，于上面同理。在名称前面加个-moz 便可解决。

其他滤镜
黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2T