以旧换新的css滤镜

发布时间：2018-09-07 16:10:01 所属栏目：经验来源：站长网

导读：嗯，不是以旧换新，是希望css滤镜这个旧东东能焕发出新的生命。在新出的css3的一些特性令大家大声叫好时，其实ie下的滤镜早已默默的实现了相似的功能。OK，话不多说，让我们挨个来看一下。界面滤镜： AlphaImageLoader：语法： filter:progid:DXImageTran

嗯，不是以旧换新，是希望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：
阴影效果。

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!