`
accphc
  • 浏览: 124539 次
  • 性别: Icon_minigender_1
  • 来自: CD
社区版块
存档分类
最新评论

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

    博客分类：
  • CSS
 
阅读更多

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。

首先，Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明，视觉上看不见。关于浏览器对opacity属性的兼容性请继续往下看：

从Firefox3.5+不再支持私有属性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的，Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性，现在回想起刚入职场不久那时候，正好是Firefox升级到3.5之后，一些做好的页面透明效果突然没有了，如今已经CSS3铺天盖地，概叹时光荏苒啊。

IE9+才开始支持CSS3 opacity，而对IE6-IE8我们习惯使用filter滤镜属性来进行实现。IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8又引入了特殊的-ms-filter，IE认为这种写法是对旧写法的一次更正，更符合规范，这个写法的属性值只是多了一对引号，效果同前。不过，这种写法的寿命也不长，到IE10对filter与-ms-filter都已经不再支持。

Safari 1.2之前的版本，是基于khtml的浏览器内核，1.2版发布后，不再支持-khtml-opacity的写法，-khtml-opacity也随之成为历史。

Konqueror从未支持过-khtml-opacity，从4.0版本开始已经支持opacity。

除IE外，目前主流浏览器 Opera 9.0+，Safari  1.2(WebKit 125) +，chrome等等都支持opacity这个透明度属性。

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 plaincopy在CODE上查看代码片派生到我的代码片
 
  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 plaincopy在CODE上查看代码片派生到我的代码片
 
  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的前面。原文描述如下：

If you want opacity to also work in IE8′s emulating IE7 mode, the order should be:

 

[css] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
  2. filter: alpha(opacity=50); // second  

 

If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.

基于统计的CSS属性支持可以参照caniuse网站http://caniuse.com/css-opacity
参考文献：CSS opacity介绍 https://developer.mozilla.org/en-US/docs/Web/CSS/opacity?redirectlocale=en-US&redirectslug=CSS%2Fopacity

分享到：
| CSS浮动元素的水平居中
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    本文将深入探讨CSS的透明度属性`opacity`以及针对IE浏览器的滤镜`filter`的使用方法，确保在不同浏览器间实现一致的透明效果。 `opacity`属性在CSS3中被引入，允许我们设定一个元素的总体透明度，取值范围从0到1。...

    css滤镜filter中文手册

    7. **不透明度滤镜（opacity）** 虽然`opacity`不是一个标准的滤镜，但它经常与滤镜一起使用，用来改变元素的透明度。例如： ```css element { opacity: 0.5; } ``` 这会让元素变得半透明。 8. **组合滤镜...

    淘宝SDK模块代码 能兼容ie6ie7ie8以及firefox的css透明滤镜

    这个名为“淘宝SDK模块代码 能兼容ie6ie7ie8以及firefox的css透明滤镜”的资源，旨在解决一个核心问题：如何在不同浏览器间，特别是老旧的Internet Explorer（IE6、IE7、IE8）和Firefox上实现一致的CSS透明效果。...

    css3 filter滤镜属性制作图片滤镜特效

    7. ** opacity滤镜（opacity()）**：与CSS的opacity属性相似，用于调整元素的不透明度。0表示完全透明，1表示完全不透明。例如，`filter: opacity(0.5);`会让元素变得半透明。 8. **invert滤镜（invert()）**：反转...

    css 滤镜大全，全部css滤镜

    CSS滤镜是现代Web设计中一个非常强大的工具，它们允许开发者在不使用任何图像编辑软件的情况下，对网页上的图片和元素应用各种视觉效果。在给定的文件中，提到了一系列的CSS滤镜效果，接下来将对这些滤镜进行详细的...

    Css filter 滤镜大全

    在CSS的世界里，`filter`属性提供了...以上就是`filter`属性及其滤镜效果的详细介绍，涵盖了从基本的透明度调整到复杂的图像变形和颜色变换。在设计和开发网页时，合理运用这些滤镜可以显著提升用户体验和视觉吸引力。

    css filter滤镜详解

    透明度是 CSS 滤镜中最基本的效果之一，可以使元素的透明度从 0（完全透明）到 100（完全不透明）。语法为：`filter: Alpha(opacity=n)`,其中 n 是透明度的值。 二、模糊（Blur） 模糊效果可以使元素模糊化，语法...

    精通CSS滤镜，精通CSS滤镜

    比如，一些老版本的IE浏览器可能不支持CSS滤镜，而现代的Chrome、Firefox、Safari和Edge则提供了良好的支持。开发者在使用时需参考Can I Use网站了解最新兼容情况。 七、CSS滤镜与Web滤镜API 除了CSS滤镜，Web滤镜...

    css自动生成滤镜效果

    7. `opacity()`：透明度滤镜，控制元素的透明度，参数是0到1之间。 8. `saturate()`：饱和度滤镜，调整元素的饱和度，参数是0到1之间，0表示无色，1表示原饱和度。 9. `sepia()`：棕褐色滤镜，使元素呈现老照片效果...

    CSS滤镜效果大全

    ### CSS滤镜效果大全 #### 一、Alpha滤镜 - 设置透明度 Alpha滤镜用于控制元素的透明度。此滤镜提供了丰富的参数配置来实现不同程度的...掌握这些滤镜的使用方法可以帮助开发者创建更具吸引力和交互性的网页界面。

    CSS滤镜使用教程

    本教程将深入讲解CSS滤镜的使用方法，帮助你提升网页设计的视觉表现力。 一、CSS滤镜基础 1. `filter`属性：所有滤镜效果都是通过CSS的`filter`属性来实现的。你可以将一个或多个滤镜函数组合在一起，用逗号分隔，...

    详解css透明度之rgba和opacity的区别及兼容

    在CSS中，设置元素透明度有两种主要方法：rgba和opacity。两者都能达到让元素变得半透明的效果，但在使用上存在一些关键的区别。 首先，我们来看opacity属性。opacity属性用于设置整个元素（包括其内容和子元素）的...

    filter(css滤镜)

    本文将深入探讨CSS滤镜的使用方法、常见效果及其在实际项目中的应用。 首先，CSS滤镜主要通过`filter`属性来实现。这个属性接受一系列函数参数，每个函数对应一种特定的视觉效果。例如： 1. `blur()`：添加模糊...

    IE滤镜操作（关于IE滤镜效果的一般演示，初级滤镜的学习操作，结合了HTML和Javascript，javascript）

    对于初学者，可以通过在线教程和示例来学习如何使用IE滤镜，例如查看名为"Filter"的压缩包中的文件，它可能包含了实践示例和详细说明。 总结，了解和掌握IE滤镜可以帮助我们理解早期Web开发的历史，并在处理旧版IE...

    CSS代码实现背景透明而文字不透明

    但这种方法在IE6和IE7中仍无法实现背景透明，我们需要使用滤镜（filter）属性： ```css 元素选择器 { zoom: 1; /* 触发hasLayout，对IE6/7生效 */ filter: progid:DXImageTransform.Microsoft.gradient...

    html5 css3设置filter图片滤镜代码

    6. **opacity(%)**：设置元素的不透明度，0%表示完全透明，100%表示完全不透明。 ```css #image-filter { filter: opacity(70%); } ``` 7. **blur(px)**：为图片添加模糊效果，参数是像素值。 ```css #...

    立用Dreamweaver MX中的CSS样式实现滤镜制作

    - 浏览器兼容性：虽然CSS3滤镜在现代浏览器中广泛支持，但老版本的IE可能需要使用其特有的滤镜语法，如`filter`属性。 - 性能：过度使用滤镜可能影响页面性能，特别是在移动设备上。因此，适度使用并优化滤镜效果是...

Magicbox
Global site tag (gtag.js) - Google Analytics