CSS 中有趣的 filter 属性

Avatarcoderfee/Jul 25, 2016/#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 更改错别字

Copyright ©; 2016-2022 coderfee, All rights reserved.