一、基本概念filter 属性用于对元素应用图形效果如模糊、颜色偏移、亮度调整等。通常用于图片、背景和视频的视觉效果处理。语法.element {filter: []* | none;}二、所有滤镜函数详解blur() - 模糊/* 高斯模糊数值越大越模糊/filter: blur(5px);filter: blur(0); /无模糊 */参数长度值不能为百分比不接受负值brightness() - 亮度filter: brightness(1); /* 原始亮度/filter: brightness(1.5); /更亮/filter: brightness(0.5); /更暗50%/filter: brightness(0); /完全黑色 */0% 为纯黑100% 为原始超过 100% 更亮contrast() - 对比度filter: contrast(1); /* 原始对比度/filter: contrast(1.5); /增强对比度/filter: contrast(0.5); /降低对比度/filter: contrast(0); /完全灰色 */grayscale() - 灰度filter: grayscale(0); /* 原始颜色/filter: grayscale(0.5); /50% 灰度/filter: grayscale(1); /完全灰度黑白 */sepia() - 棕褐色/怀旧filter: sepia(0); /* 原始颜色/filter: sepia(0.6); /60% 棕褐色/filter: sepia(1); /完全棕褐色 */saturate() - 饱和度filter: saturate(1); /* 原始饱和度/filter: saturate(2); /超级饱和/filter: saturate(0); /完全不饱和等同于灰度/filter: saturate(0.5); /降低饱和度 */hue-rotate() - 色相旋转filter: hue-rotate(0deg); /* 原始色相/filter: hue-rotate(90deg); /旋转90度/filter: hue-rotate(180deg); /旋转180度补色 */filter: hue-rotate(270deg);参数角度值deg、rad、turn 等色相环旋转invert() - 反色filter: invert(0); /* 原始颜色/filter: invert(0.5); /50% 反色/filter: invert(1); /完全反色负片效果 */opacity() - 透明度filter: opacity(1); /* 完全不透明/filter: opacity(0.5); /50% 透明/filter: opacity(0); /完全透明 */类似 opacity 属性但硬件加速性能更好drop-shadow() - 投影filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));filter: drop-shadow(0 0 5px blue);参数 ?与 box-shadow 不同它遵循元素的透明轮廓三、组合使用可以同时应用多个滤镜/* 多个滤镜用空格分隔 */.element {filter: blur(2px) brightness(1.2) contrast(1.1);}/* 创建特定效果/.image:hover {filter: grayscale(100%) brightness(0.8) contrast(1.2);/黑白、稍暗、高对比度 */}四、常见效果示例复古照片效果.vintage {filter: sepia(0.5) contrast(0.9) brightness(0.9) saturate(0.8);}冷色调效果.cool-tone {filter: hue-rotate(180deg) saturate(0.8) brightness(1.1);}高对比度黑白.high-contrast-bw {filter: grayscale(1) contrast(1.5) brightness(0.9);}毛玻璃效果.glass {filter: blur(10px) brightness(1.1);}霓虹灯效果.neon {filter: brightness(1.5) contrast(1.2) saturate(2)drop-shadow(0 0 10px currentColor);}五、性能与注意事项性能对比/* ✅ 推荐使用 filter 实现透明度硬件加速 */filter: opacity(0.5);/* ⚠️ 避免opacity 属性可能触发重绘/opacity: 0.5;2. 创建堆叠上下文/filter 会创建新的堆叠上下文/.parent {filter: blur(1px);/子元素的 z-index 相对于这个父元素/}3. 影响后代元素/注意filter 会影响所有后代元素/.container {filter: blur(5px); /容器内所有内容都会模糊 */}/* 解决方案只对背景应用滤镜/.container {position: relative;}.container::before {content: ‘’;position: absolute;inset: 0;background: url(‘bg.jpg’);filter: blur(5px); /只有背景模糊 */}六、backdrop-filter对元素后面的内容应用滤镜/* 常见的毛玻璃导航栏/.navbar {background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px) saturate(1.5);-webkit-backdrop-filter: blur(10px); /Safari 支持 */}/* 背景变暗 */.overlay {backdrop-filter: brightness(0.5);}七、完整对比表函数 作用 默认值 范围blur() 模糊 0 0brightness() 亮度 1 0contrast() 对比度 1 0grayscale() 灰度 0 0-1sepia() 棕褐色 0 0-1saturate() 饱和度 1 0hue-rotate() 色相旋转 0deg 任意角度invert() 反色 0 0-1opacity() 透明度 1 0-1drop-shadow() 投影 none -八、实用技巧/1. 悬浮高亮/.btn-back {cursor: pointer;transition: all 0.25s ease-out;.btn-wrap__icon { background-image: url(~/assets/images/icon-left.png); } :hover { filter: brightness(1.15) saturate(1.1); // 提亮15%增加10%饱和度色彩更鲜艳 }}/* 2. 禁用状态 */.disabled {filter: grayscale(1) opacity(0.5);pointer-events: none;}/* 3. 暗色模式图片适配 */media (prefers-color-scheme: dark) {img {filter: brightness(0.8) contrast(1.2);}}/* 4. 加载占位符 */.loading {filter: blur(20px);transition: filter 0.3s;}.loaded {filter: blur(0);}CSS filter 是一个非常强大的视觉处理工具合理使用可以创造出丰富的视觉效果