一、基本概念
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 0+
brightness() 亮度 1 0+
contrast() 对比度 1 0+
grayscale() 灰度 0 0-1
sepia() 棕褐色 0 0-1
saturate() 饱和度 1 0+
hue-rotate() 色相旋转 0deg 任意角度
invert() 反色 0 0-1
opacity() 透明度 1 0-1
drop-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 是一个非常强大的视觉处理工具，合理使用可以创造出丰富的视觉效果！