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

滤镜名说明

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 坐标值

Html代码

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

CSS代码：

.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);  
}

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

-msfilter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  

filter: alpha(opacity=50); // second

posted @ 2015-07-08 14:47 Koidt 阅读(358) 评论(0) 编辑收藏举报

刷新页面返回顶部

coldfishdt

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