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


Posted in HTML / CSS onDecember 20, 2016

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 :  要使用的滤镜效果。多个滤镜之间用空格隔开。

说明:

1、设置或检索对象所应用的滤镜效果。

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

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

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

5、对应的脚本特性为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代码

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

注意:测试不要忘了写DOCTYPE,否则会偏离真实效果。

对应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);  
}

使用中,我们可以根据要适配的浏览器/版本,从上面选择自己需要的代码行。如果要全面支持所有浏览器,至少需要有关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:

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
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.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
详解CSS3浏览器兼容
Dec 14 #HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 #HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 #HTML / CSS
Css3新特性应用之形状总结
Dec 08 #HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 #HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 #HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 #HTML / CSS
You might like
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
javascript实现日历效果
2019/06/17 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
python中的字符串内部换行方法
2018/07/19 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
高三地理教学反思
2014/01/11 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
centos7安装mysql5.7经验记录
2022/05/02 Servers