CSS 中有趣的 filter 属性

July 25,2016
0
CSS

语法

el {
  filter: none | filter-function | filter-function;
}

效果展示

See the Pen oLdyEV by Simon (@coderfee) on CodePen.

注释

上面的效果依次是:

  • 第一张为原图
  • 亮度 brightness(60%)
  • 对比度 constrast(150%)
  • 灰度 grayscale(100%)
  • 饱和度 saturation(180%)
  • 棕褐色 sepia(100%)
  • 色相旋转 hue-rotate(90deg)
  • 色相旋转 hue-rotate(180deg)
  • 色相旋转 hue-rotate(270deg)
  • 反色 invert(100%)
  • 模糊 blur(1px)
  • 透明度 opacity(65%)
  • 阴影 drop-shadow(5px 5px 10px #666)

这些“滤镜”可以叠加使用。有时可能需要用一张图片做成不同效果,这时 filter 属性就可以派上用场,省去了 P 图的时间。

详细说明

filter默认值说明
blur0不接受百分比,数值越大越模糊
brightness1数值超过 100%,图像更亮
contrast1数值超过 100%,对比度更低
drop-shadow
grayscale0值为 100%时为灰度图像,0% - 100%
hue-rotate0deg无最大值
invert0100%完全反转,0% - 100%
opacity10%完全透明,0% - 100%
saturate10%完全不饱和,超过 100%饱和度
sepia0100%为完全深褐色,0% - 100%

参考链接

CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!

更新日志

2016-08-08 增加详细说明

2016-07-27 更改错别字


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。