以旧换新的css滤镜
来源:程序员人生 发布时间:2014-02-15 14:26:59 阅读次数:3358次
嗯,不是以旧换新,是希望css滤镜这个旧东东能焕发出新的生命。在新出的css3的一些特性令大家大声叫好时,其实ie下的滤镜早已默默的实现了相似的功能。OK,话不多说,让我们挨个来看一下。
界面滤镜:
AlphaImageLoader:
语法:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=x.png, sizingMethod=image)
注意,ie8要采用-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(...)" 的方式,下同。
说明:
sizingMethod:默认的image值就是相当于里面放个img,会撑开外层容器;crop即设置背景图片;scale则是根据外层容器大小拉伸图片。
Gradient:
渐变效果,因为只能指定startColor和endColor,也不能加stop,所以实际应用上往往不能符合需求。
语法:
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF000000, endColorStr=#FF000000, gradientType=0)
说明:
startColorStr:注意这里采用的是ARGB的格式,不是常见的 RGB,也不是RGBA。
gradientType: 默认0竖向,1横向。
对比:
相比之下,新的css强大太多,有stop,有权重,有多个方向。
firefox 3.6:-moz-linear-gradient(top, blue, white 80%, orange)
safari 4, chrome:-webkit-gradient(linear, left top, right bottom, from(#ff0), color-stop(0.5, orange), to(#ff0000);
静态滤镜:
Alpha:
透明效果。
语法:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishOpacity=0, style=1, startX=0, startY=0, finishX=100, finishY=100)
说明:
style:一般用的就是默认值0,设定整个元素的透明度。1表示线性渐变,用上了其余的所有属性。2表示放射性渐变,即椭圆形的,由里向外。3表示矩形渐变,即x形的,由外向里。
对比:
other browsers:opacity: 0.8
BasicImage:
很多,灰度效果,镜像效果,遮罩效果,透明效果,旋转效果,还有X光效果。
语法:
filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, invert=0, mask=1, mirror=0, opacity=100, rotation=1, xray=1)
说明:
mask:以透明部分为遮罩。
maskcolor:css中属性无效,但用js指定有效,指定mask为1时不透明部分的颜色,如0xff000000,采用0xAARRGGBB格式。
rotation:1表示顺时针转90度,2表示180,3表示270。xray:拍一个x光片,grayScale的反像。
对比:
css的rotation除了角度,基准点自由指定外,一个最大的不同就是,css的旋转后原来的位置还是会被占据,就如同position:relative的效果一样。
firefox 3.5:-moz-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -moz-transform-origin: 0% 0%
safari 4, chrome:-webkit-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform-origin: 0% 0%
opera 10.5:-o-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform-origin: 0% 0%
Blur:
模糊效果。
语法:
filter:progid:DXImageTransform.Microsoft.Blur(makeShadow=true, pixelRadius=2.0, shadowOpacity=0.75)
说明:
makeShadow:是否转化为阴影。
Chroma:
语法:
filter:progid:DXImageTransform.Microsoft.Chroma(color=#ff0000ff)
说明:
color:指定的颜色值变为透明,采用#AARRGGBB格式。
Compositor:
语法:
filter:progid:DXImageTransform.Microsoft.Compositor(function=0)
说明:
function:指定合成的函数,用数值表示,0-10,19-25。
DropShadow:
阴影效果。
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠