CSS透明opacity和IE各版本透明度滤镜filter的准确用法

来源：互联网发布：西南交通大学网络缴费编辑：程序博客网时间：2024/06/05 16:39

Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值;opacity取值为1是完全不透明，取值为0是完全透明，只是视觉上看不见。

浏览器对opacity属性的兼容性：

-ms-filter: IE8又引入了此特殊的，不过，这种写法的寿命也不长，到IE10已经不再支持。

-khtml-opacity: Safari 1.2之前的版本，是基于khtml的浏览器内核,支持此写法，1.2版发布后，不再支持此写法

progid:DXImageTransform.Microsoft.Alpha(Opacity=xx): IE4-IE9都支持这种滤镜写法

-moz-opacity: Mozilla 1.7 (Firefox 0.9)之前FF使用的私有属性: Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性

filter滤镜: IE6-IE8我们习惯使用属性来进行实现

opacity: IE9+, Opera 9.0+, Safari 1.2(WebKit 125) +, chrome等等都支持这个透明度属性

IE 从4.0版开始，就提供了一些内置的多媒体滤镜特效，具体的使用方法是：

语法： filter : filter

参数： filter : 　要使用的滤镜效果。多个滤镜之间用空格隔开。

说明：

设置或检索对象所应用的滤镜效果.

要使用该属性，对象必须具有height，width，position三个属性中的一个。

滤镜的机制是可扩展的。可以开发和使用第三方滤镜。

该属性在MAC平台上不可用。

对应的脚本特性为filter。

IE4.0以上版本，支持以下14种滤镜：

滤镜名说明

Alpha 让HTML元件呈现出透明的渐进效果
Blur 让HTML元件产生风吹模糊的效果
Chroma 让图像中的某一颜色变成透明色
DropShadow 让HTML元件有一个下落式的阴影
FlipH 让HTML元件水平翻转
FlipV 让HTML元件垂直翻转
Glow 在元件的周围产生光晕而模糊的效果
Gray 把一个彩色的图片变成黑白色
Invert 产生图片的照片底片的效果
Light 在HTML元件上放置一个光影
Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩
Shadow 产生一个比较立体的阴影
Wave 让HTML元件产生水平或是垂直方向上的波浪变形
XRay 产生HTML元件的轮廓，就像是照X光一样

Alpha 滤镜参数详解

参数名说明取值说明

Opacity 不透明的程度，百分比。   从0到100，0表是完全透明，100表示完全不透明。
FinishOpacity    这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。从0到 100，0表是完全透明，100表示完全不透明。
Style 当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。   0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形辐射。
StartX 渐进开始的 X 坐标值
StartY 渐进开始的 Y 坐标值
FinishX 渐进结束的 X 坐标值
FinishY 渐进结束的 Y 坐标值

下面通过一个例子来测试filter和opacity的兼容性：
Html代码

[html] view plain copy
 
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <div class="transparent_class">测试透明度</div>  
</body>  
</html>  

注意：测试不要忘了写DOCTYPE，否则会偏离真实效果。
对应CSS代码：

[css] view plain copy
 
.transparent_class {  
    /* Required for IE 5, 6, 7 */  
    /* ...or something to trigger hasLayout, like zoom: 1; */  
    width:300px;  
    height:300px;  
    line-height:300px;  
    text-align:center;  
    background:#000;  
    color:#fff;  
    /* older safari/Chrome browsers */  
    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
}  

使用中，我们可以根据要适配的浏览器/版本，从上面选择自己需要的代码行。如果要全面支持所有浏览器，至少需要有关opacity或filter的前5句。

需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面

0 0