CSS的filter属性可为HTML元素添加视觉滤镜效果。1. blur()实现高斯模糊，常用于背景虚化；2. brightness、contrast、saturate等函数可调节色彩；3. 多个滤镜可组合使用，顺序影响效果；4. 适用于图片、文字等元素，但需注意性能与兼容性问题。
在网页设计中，使用CSS的filter属性可以轻松为HTML元素添加视觉滤镜效果，比如模糊、亮度调整、对比度变化等。这个属性适用于图片、背景、文字甚至视频，非常适合做视觉增强或交互特效。
1. 模糊滤镜（Blur）
最常见的滤镜之一是高斯模糊，通过blur()函数实现，参数为模糊半径，单位通常是px。
例如，给一张图片添加5像素的模糊效果：
.blur-effect {
filter: blur(5px);
}
数值越大，图像越模糊。常用于模态弹窗背后的背景虚化，提升前景内容的可读性。
立即学习“前端免费学习笔记（深入）”；
2. 色彩调整滤镜
CSS filter还支持多种色彩类滤镜，可用于调整显示效果：
- brightness(%)：调节亮度。100%为原图，小于100%变暗，大于则变亮。
- contrast(%)：设置对比度。0%会变成全灰，100%保持原样。
- saturate(%)：饱和度。0%变为灰度图，超过100%颜色更鲜艳。
-
hue-rotate(deg)：色相旋转，按角度改变颜色，如
hue-rotate(90deg)。 - grayscale(%)：转为灰度图，100%完全去色。
- invert(%)：反色处理，100%让颜色完全反转。
示例：将图片变为黑白并增加亮度
.dark-mode-img {
filter: grayscale(100%) brightness(120%);
}
3. 组合多个滤镜
你可以将多个滤镜写在同一行，用空格分隔：
.fancy-effect {
filter: blur(2px) brightness(80%) contrast(120%);
}
注意顺序会影响最终效果，建议先模糊再调色，避免性能问题或渲染异常。
4. 应用场景与注意事项
filter适合用于图片预览、悬停特效、夜间模式、加载状态等场景。但需注意：
基本上就这些。合理使用filter能让页面更有层次感，又不会增加额外资源负担。
