CSS filter 滤镜效果

学习filter属性 · 难度：进阶 · +15XP

CSS filter 滤镜效果

filter 属性为元素提供图形滤镜效果，类似于图像处理软件中的滤镜。无需 Photoshop，CSS 就能实现模糊、亮度调整、对比度、灰度化等视觉效果。

所有滤镜函数

函数	说明	取值范围
blur()	高斯模糊	px, rem 等长度单位
brightness()	亮度	0%+ 或数字；1 (100%) 为正常
contrast()	对比度	0%+ 或数字
grayscale()	灰度	0% ~ 100% (或 0~1)
sepia()	褐色/怀旧	0% ~ 100% (或 0~1)
hue-rotate()	色相旋转	0deg ~ 360deg
invert()	反转颜色	0% ~ 100% (或 0~1)
saturate()	饱和度	0%+ 或数字
opacity()	不透明度	0% ~ 100% (或 0~1)
drop-shadow()	投影	同 box-shadow 参数

基本使用示例

/* 模糊 */
.blur { filter: blur(5px); }
/* 灰度 — 常用于图片加载前占位 */
.grayscale { filter: grayscale(100%); }
/* 亮度调暗 — 作为遮罩层 */
.dimmed { filter: brightness(0.6); }
/* 高对比度 */
.high-contrast { filter: contrast(150%); }
/* 黑白 + 高对比 + 锐化 */
.dramatic { filter: grayscale(100%) contrast(120%) brightness(0.9); }

hover 动画

img {
  filter: grayscale(100%) brightness(0.9);
  transition: filter 0.5s ease;
  cursor: pointer;
}
img:hover {
  filter: grayscale(0%) brightness(1);
}

drop-shadow — 比 box-shadow 更强大

与 box-shadow 不同，drop-shadow() 会沿着元素的轮廓投射阴影，包括透明 PNG 的实际形状：

/* box-shadow — 矩形阴影 */
.box { box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
/* drop-shadow — 按内容形状投影（透明 PNG 周围） */
.pattern { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }

多重滤镜组合

/* 多个滤镜空格分隔，按顺序应用 */
.artistic {
  filter:
    contrast(120%)
    saturate(130%)
    brightness(0.95)
    sepia(10%);
}

实用场景

1. 图片懒加载模糊过渡：加载完成后移除 blur()
2. Logo 灰色悬停效果：grayscale() + hover 过渡
3. 卡片悬停突出：其他卡片应用 brightness(0.8)
4. 背景模糊毛玻璃：配合 backdrop-filter 使用
5. 夜间模式：invert(1) hue-rotate(180deg)

性能注意事项

filter 使用 GPU 加速，通常性能良好。但多个叠加的模糊效果可能影响性能。对于动画场景，建议使用 will-change: filter 提前通知浏览器。

.filter-animated {
  will-change: filter;
  transition: filter 0.4s ease;
}

CSS 滤镜为网页设计提供了强大的视觉表现力。合理使用能让页面更具质感，但要注意不要过度使用影响可读性和性能。