以旧换新的css滤镜
发布时间：2018-09-03 19:06:31 所属栏目：创业 来源：站长网
导读：嗯，不是以旧换新，是希望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： 阴影效果。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读