IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜、JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!!
CSS3 Filter兼容性表
SVG effect for HTML兼容性表
下文将探讨以下滤镜!
Speia滤镜 灰度图滤镜 高斯模糊滤镜 反色滤镜 饱和度滤镜
对比度滤镜 亮度滤镜 色相旋转滤镜 阴影滤镜
先P张原图作参考系(清纯MM哦!!)
二、Speia滤镜(Speia)
Speia滤镜是对图片或元素整体进行棕褐色处理,就是老照片那种效果。下面直接看疗效!
看,岁月的痕迹啊,是不是有妈妈年代的感觉呢?!
1. CSS3滤镜实现
.sepia{ /** 格式,filer: sepia(效果范围) * 效果范围,取值范围为0-1或0-100%;0表示无效果,1或100%表示最大效果 */ -webkit-filter: sepia(100%); -moz-filter:sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); }
查看更多关于CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]_html/css_W的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did111619