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
  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
  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
  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透明opacity和IE各版本透明度滤镜filter的最准确用法相关推荐

  1. CSS技巧收集——毛玻璃效果（深入理解滤镜filter）

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 原文链接 ...

  2. html的opacity标签,css中opacity是什么意思

    css样式 给div样式opacity:0 是什么意思 透明度 注意 ie低版本要实现透明度必须用ie特有的滤镜 而非简单的opacity CSS中 not(.active) { opacity: 0 ...

  3. html5 css透明效果,css中实现背景透明的三种方式

    css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, g ...

  4. Web前端知识CSS（CSS定位、CSS透明、阴影、边框圆角）

    一.CSS 定位 定位的作用 普通文档流中块元素垂直排列,行内元素水平排列. 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某 ...

  5. css： opacity、transparent、rgba 区别

    opacity 设置元素的不透明度 取值范围:0-1:其中 opacity:0: //元素完全透明(即元素不可见) [盒子和盒子的内容都看不见] opacity:1: //元素完全不透明(即元素后面的 ...

  6. css透明饱和度,css中filter:alpha透明度使用

    css中filter:alpha透明度使用 使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示例,大 ...

  7. css3透明度过度,CSS透明半透明与transition过渡效果

    一.CSS透明与半透明 1.CSS3 整体透明 opacity : 1 ; 透明度 filter : alpha( opacity = 100 ); 老旧浏览器 IE8 - 2.CSS3 颜色透明 # ...

  8. html滤镜无效果,为什么css滤镜(filter属性)没用？

    为什么css滤镜(filter属性)没用?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 滤镜filter属性,可以对网页中的图片进行类似Photosho ...

  9. 一个css属性让页面变成黑白色之CSS3 filter(滤镜) 属性

    2020年是不平凡的一年,在此缅怀一下在抗击新冠肺炎中牺牲的烈士和因为新冠肺炎去世的同胞们,有时候我们需要让网站的页面变成黑白色彩的,只需要一个css属性filter属性即可: filter 属性定义 ...

  10. 十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition

    七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状 移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...

最新文章

  1. 网速测量、流量监控软件 Bandwidth Meter Pro
  2. 已锁定计算机,计算机锁定怎么解除_计算机已锁定如何解除
  3. HarmonyOS之AI能力·实体识别
  4. springboot+springcloud相关问题
  5. 大数据预测实战-随机森林预测实战（一）-数据预处理
  6. dubbo之分组聚合
  7. 2063：【例1.4】牛吃牧草【入门题】
  8. Python定时爬取微博热搜+pyecharts动态图展示
  9. dota2 自定义官方服务器,起源2引擎DOTA2重生设置 自定义房间创建
  10. 数据如何真正为业务创造价值！
  11. 智能车图像处理3-中线累积差值的统计
  12. 计算机中没有汉字输入,电脑没有了输入法无法输入汉字,是为什么??
  13. 如何创建一个网站？初学者的分步指南
  14. BC3.1精简版win7/10下不兼容问题的解决
  15. kvm线程-005-线程状态-THREAD_JUST_BORN
  16. 怀孕期间准妈妈多吃西红柿
  17. 谁是中国移动互联网的王者？360发布定制手机消息随感
  18. ArcGIS中将一个shp图层批量分割成单个的shp；shp批量转geojson
  19. 51单片机学习-5定时器与中断
  20. python create line_Tkinter create_line problem:错误的#坐标：应为偶数

热门文章

  1. 第1讲(数据库软件的配置与游戏数据库的搭建)
  2. Windows徽标键（WinKey）的屏蔽和恢复
  3. 【DL-安装遇错】解决出现 pip‘s dependency resolver does not currently take into account all the packages that..
  4. MATLAB如何创建新文件夹-mkdir函数，如何进入指定文件夹-cd函数
  5. 【操作系统】30天自制操作系统--(1)虚拟机加载最小操作系统
  6. 我入门的小程序，居然已经用户过万(上)
  7. Docker桥存储卷管理
  8. LeetCode114--词典中最长的单词、最短补全词、宝石与石头
  9. 机器人学回炉重造（4）：动力学仿真（附牛顿-欧拉递归逆动力学算法matlab代码）
  10. 微软各产品的生命周期