css filter 常用方法函数和应用实例

1. blur() 模糊

filter: blur(半径);


参数：模糊半径（像素），值越大越模糊
示例：filter: blur(5px);

2. brightness() 亮度

filter: brightness(百分比);
参数：1=原始对比度，0=全灰，>1 更高对比

示例：filter: contrast(200%);

contrast() 对比度

filter: contrast(百分比);

参数：1=原始对比度，0=全灰，>1 更高对比

示例：filter: contrast(200%);

4. drop-shadow() 投影

filter: drop-shadow(x偏移 y偏移 模糊半径 颜色);

参数：

x-offset：水平偏移（必需）

y-offset：垂直偏移（必需）

blur：模糊半径（可选）

color：颜色值（可选）

示例：filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));

5. grayscale() 灰度

filter: grayscale(百分比);
参数：0=原始颜色，1=完全灰度

示例：filter: grayscale(100%);

6. hue-rotate() 色相旋转

filter: hue-rotate(角度);
参数：颜色环旋转角度（0deg-360deg）

示例：filter: hue-rotate(90deg);

7. invert() 反色

filter: invert(百分比);
参数：0=原始颜色，1=完全反色

示例：filter: invert(100%);

8. opacity() 透明度

参数：0=完全透明，1=不透明

示例：filter: opacity(50%);

9. saturate() 饱和度

filter: saturate(百分比);
参数：1=原始饱和度，0=无饱和度，>1 过饱和

示例：filter: saturate(200%);

10. sepia() 深褐色

filter: sepia(百分比);
参数：0=原始颜色，1=完全深褐色

示例：filter: sepia(80%);

三、组合使用

/* 组合多个滤镜 */
.element {
  filter: brightness(1.2) contrast(0.9) saturate(1.1);
}

实用技巧

• 1. 动态交互

.button {
  transition: filter 0.3s;
}

.button:hover {
  filter: brightness(1.2) drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

• 2. 图片处理

/* 老照片效果 */
.vintage-photo {
  filter: sepia(80%) contrast(0.9) brightness(0.9) saturate(1.2);
}

• 3. 文字特效

.glow-text {
  filter: drop-shadow(0 0 8px #ff69b4);
}

性能注意事项

• 硬件加速：滤镜会自动启用 GPU 加速
• 限制数量：单个元素建议不超过 5 个滤镜
• 避免全屏应用：大面积使用可能影响性能

特性	filter	backdrop-filter
作用对象	当前元素	元素背后的区域
常见用途	图片处理/特效	毛玻璃效果
兼容性	良好	需要最新浏览器