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 滤镜参数详解
参数名 说明 取值说明
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代码
对应CSS代码:
使用中,我们可以根据要适配的浏览器/版本,从上面选择自己需要的代码行。如果要全面支持所有浏览器,至少需要有关opacity或filter的前5句。
需要声明的是,如果你要同时使用filter和-ms-filter,请将-ms-filter写在filter的前面