/ CSS3

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)

参考资料

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 大牛的神器,不过内容中的图片还是得应用滤镜,你不可能把所有图片都转成灰度吧?

解决 -webkit-filter: grayscale(100%) 在 retina 下的模糊问题:在上述代码的位置加上 -webkit-transform: translateZ(0);via