之前看到大家都在讨论乔任梁的死, 我不知道他是谁, 因此百度百科了一下
我注意到为表示悼念, 百度百科界面是灰色的, 连图片也是. 但审查元素的时候, 可以发现图片原本是彩色的, 这么说来一定是被CSS处理后才显示为灰的.
究竟是怎么回事呢, 最终我找到了如下代码:
1 | body { |
把它注释掉, 页面就还原成彩色的了. 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