好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]_html/css_W

一、前言                            

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的详细内容...

  阅读:27次