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

悠悠 2022-07-11 12:04 214阅读 0赞

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][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.  **<****meta** charset=utf\-8 **/>**  
5.  **<****title****>**JS Bin**</****title****>**  
6.  **</****head****>**  
7.  **<****body****>**  
8.    **<****div** class="transparent\_class"**>**测试透明度**</****div****>**  
9.  **</****body****>**  
10. **</****html****>**

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

**\[css\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  .transparent\_class \{  
2.      /\* Required for IE 5, 6, 7 \*/  
3.      /\* ...or something to trigger hasLayout, like zoom: 1; \*/  
4.      **width**:300px;  
5.      **height**:300px;  
6.      **line-height**:300px;  
7.      **text-align**:center;  
8.      **background**:\#000;  
9.      **color**:\#fff;  
10.     /\* older safari/Chrome browsers \*/  
11.     -webkit-opacity: 0.5;  
12.     /\* Netscape and Older than Firefox 0.9 \*/  
13.     -moz-opacity: 0.5;  
14.     /\* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器\*/  
15.     -khtml-opacity: 0.5;  
16.     /\* IE9 + etc...modern browsers \*/  
17.     opacity: .5;  
18.     /\* IE 4-9 \*/  
19.     filter:alpha(opacity=50);  
20.     /\*This works in IE 8 & 9 too\*/  
21.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
22.     /\*IE4-IE9\*/  
23.     filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
24. \}

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

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

[view plain]: http://blog.csdn.net/freshlover/article/details/17143341#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/98603
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/98603/fork