CSS3 滤镜

特殊的时期，会有特殊的需求。尽管我不太赞成这种流于形式的做法，不过这并不影响我们了解相关技术原理。

CSS 滤镜最早出现在 IE4 中，在 CSS3 中被纳入标准，不过语法和原来 IE 里的实现完全不同，目前被 W3C 列为工作草案。CSS3 标准的滤镜包含几个预定义好的函数，也可以指定 URL 引用 SVG 实现自定义效果。

IE10 已经废弃了原来 IE 特有的滤镜，但 IE10 目前还不支持标准的滤镜效果。对于 IE4-9，可以参考 MSDN 上的文档 Visual Filters and Transitions Reference - Demo （IE only）。

语法

使用预定义函数：

filter: <filter-function> [<filter-function>]* | none

引用 SVG 滤镜元素：

filter: url(svg-url#element-id)

• 初始值 none
• Applies to graphics and container elements
• 继承 no
• Media visual
• Computed value 指定值
• Animatable yes

函数

1. url(resource)
2. blur(radius)
3. brightness(amount)
4. contrast(amount)
5. drop-shadow(<shadow>)
6. grayscale(amount)
7. hue-rotate(angle)
8. invert(amount)
9. opacity(amount)
10. saturate(amount)
11. sepia(amount)

参考资料

• Applying SVG effects to HTML content - Firefox 目前（20.0）不支持预定义的函数，只能引用 SVG 实现
• CSS3 Image Filter
• Understanding CSS Filter Effects
• Say Hello to Webkit Filters | Demo ( WebKit only)
• CSS Filter Effects Demos | Demo2

CSS 网页灰度效果

这个其实才是很多人想要的。基本各种浏览器都实现了，比起原来的 IE only 好一些。其中Opera 没有测试；IE10 不行，不支持标准也不支持私有属性。

html {
    filter:gray;
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    moz-filter:url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");/*firefox*/
}

更彻底的方式 - CssGaga -哀悼日网站一键变灰 ，来自 TX 大牛的神器，不过内容中的图片还是得应用滤镜，你不可能把所有图片都转成灰度吧？