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);这种组合常用于图片悬停增强，让图像看起来更生动。例如：Eclipse导入Android或其他的JAVA项目的正确方法 WORD版本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看下载立即学习“前端免费学习笔记（深入）
”；
鼠标悬停时轻微提亮并增加饱和度：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 使用以优化渲染效率。不复杂但容易忽略细节控制。