CSS的filter属性可为元素添加视觉特效，支持blur、brightness、contrast等函数，通过参数控制效果强度，常用于图像美化、悬停增强、复古风格、模糊背景等场景，多个滤镜可组合使用，适用于图片、文字、视频等元素，结合transition实现平滑动画，提升界面质感的同时需注意性能优化。
CSS 的 filter 属性可以为元素添加视觉特效，常用于图像、背景或整个组件的美化处理。它支持多种滤镜函数，能实现模糊、亮度调整、对比度变化等效果，无需借助图片编辑软件或 JavaScript 即可完成简单而强大的视觉优化。
常见的 filter 滤镜函数及效果
每个 filter 函数都接受一个参数，用于控制效果强度：
- blur(px)：添加高斯模糊。数值越大越模糊，如 filter: blur(5px);
- brightness(%)：调整亮度。100% 为原图，大于100%更亮，小于则变暗
- contrast(%)：设置对比度。0% 会变成全灰，100% 为原图
- grayscale(%)：转为灰度图像。100% 完全去色
- saturate(%)：饱和度调整。超过100%色彩更鲜艳
- hue-rotate(deg)：色相旋转，通过角度改变颜色基调
- invert(%)：反色处理，100% 时颜色完全颠倒
- opacity(%)：透明度，类似 opacity 属性，但可用于 filter 链
- sepia(%)：添加褐色（老照片）效果
常用组合滤镜提升视觉表现
多个滤镜可通过空格连接，实现复合效果：
filter: brightness(1.2) contrast(1.1) saturate(1.3);这种组合常用于图片悬停增强，让图像看起来更生动。例如：
立即学习“前端免费学习笔记（深入）”；
- 鼠标悬停时轻微提亮并增加饱和度：
img:hover { filter: brightness(1.1) saturate(1.2); } - 制作复古风格头像：
.avatar { filter: sepia(80%) hue-rotate(-15deg); } - 模糊背景模态框：
.modal-bg { filter: blur(3px); }
实际应用场景示例
filter 不仅适用于图片，还能用在按钮、文字、视频甚至 SVG 上。
-
加载中的模糊占位图：图片加载前先显示模糊预览
.placeholder { filter: blur(8px); transition: filter 0.3s; }
.loaded { filter: blur(0); } -
夜间模式反色适配：对特定区域使用 invert + 色调还原
.dark-mode-img { filter: invert(1) hue-rotate(180deg); } -
动态悬停卡片：结合 transition 实现平滑过渡
.card:hover { filter: brightness(1.3) contrast(1.2); }
基本上就这些。合理使用 filter 可以提升界面质感，同时注意性能影响，特别是对大面积元素频繁应用 blur 或动画时，建议配合 will-change 或 transform 使用以优化渲染效率。不复杂但容易忽略细节控制。
