CSS3滤镜--从乔任梁的百度百科说起

之前看到大家都在讨论乔任梁的死, 我不知道他是谁, 因此百度百科了一下

我注意到为表示悼念, 百度百科界面是灰色的, 连图片也是. 但审查元素的时候, 可以发现图片原本是彩色的, 这么说来一定是被CSS处理后才显示为灰的.

究竟是怎么回事呢, 最终我找到了如下代码:

1
2
3
4
5
6
7
8
9
10
body {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter i…0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: gray;
}

把它注释掉, 页面就还原成彩色的了. filter就是今天的主角, CSS3滤镜

想直接看效果的, 可以看w3cPlus的文章.

不过该文章是2012的了, 因此我自己再实践了一遍, 代码在码云, 但不能在线预览.

实践后的总结如下:

  • grayscale 灰度
  • sepia 褐色. 看起来就像老照片
  • saturate 饱和度
  • hue-rotate 色相旋转. 0~360deg, 超出后重新计算
  • invert 反色. 看起来像相片底片, 50% 是分界线
  • opacity 透明度. 这个特效跟opacity属性没差别, 建议直接使用opacity
  • brightness 亮度. 我不知道上限是多少. 我试过1000都有效果的
  • contrast 对比度. 大于1才有意思
  • blur 模糊. 0~100px, 注意调试效果的时候保护眼睛😁
  • drop-shadow 阴影. 增加立体感, 用法同box-shadow(5px 5px 5px #ccc), 但效果有区别, box-shadow的阴影比较深/多, 可以二者同时使用
  • url 这个不好用, 一般用于svg. 如果使用在线图片, 则遵循同源策略, 麻烦得很, 不建议使用.

上面的大多数函数值为可以填数字或百分比, 数字会转换成百分比. 如0~1会转换成0~100%; 负值是无效的.

少数函数值超过100%还是有效果的. 实践中多尝试吧.

其实我在今年初的时候, 就有接触到filter了, 当时用到了blur特效. 不过当时是别人写的代码, 没深入研究. 因为那时我CSS还很菜😂

兼容性

  • 低版本的Chrome或Safari需要带-webkit前缀
  • Firefox没有前缀的, 也即支持就支持, 不支持就是不支持, 因而前面百度的CSS是有些多余的. 当然它可能是通过autoprefixer处理的, 不是人手写的
  • IE一直不支持filter. 它那自己的一套滤镜规则, 也叫filter. 一直都没有面向过IE开发, 我就没往这方面研究了

经测试, 以下浏览器不带前缀是没问题的

  • Chrome 53
  • Safari 9
  • Firefox 48

更多详情可以点击CanIUse

参考资料

Fork me on GitHub