CSS `filter` 属性详解：图像滤镜效果全解析

CSS filter 属性提供了强大的图像处理功能，允许开发者在不借助图像编辑软件的情况下，直接通过CSS代码为网页元素（主要是图片）添加各种视觉效果。下面我将详细解析你提供的代码示例，并全面介绍所有可用的滤镜函数

基本语法

.filtered-image {
  filter: <filter-function> [<filter-function>]* | none;
}

代码示例解析

.filtered-image {
  filter: grayscale(50%) blur(2px);
  /* 其他滤镜 */
  filter: 
    brightness(1.2)
    contrast(0.8)
    sepia(0.3);
}

注意 ：这个示例中有两个filter声明，实际使用时只会应用最后一个（CSS的层叠特性）。正确的做法应该是将所有滤镜函数合并到一个filter属性中：

.filtered-image {
  filter: 
    grayscale(50%) 
    blur(2px)
    brightness(1.2)
    contrast(0.8)
    sepia(0.3);
}

各滤镜函数详解

1. grayscale() 灰度滤镜

• 作用：将图像转换为灰度图

• 参数：0%到100%之间的值

  • 0%：原始图像
  • 100%：完全灰度

• 示例：

filter: grayscale(50%); /* 50%灰度 */
filter: grayscale(1);   /* 等同于100%，完全灰度 */

2. blur() 模糊滤镜

• 作用：对图像应用高斯模糊

• 参数：长度值（如px、rem等），值越大越模糊

  • 0：无模糊

• 示例：

filter: blur(2px); /* 2像素模糊 */
filter: blur(0.5rem); /* 使用相对单位 */

3. brightness() 亮度调节

• 作用：调整图像亮度

• 参数：数值或百分比

  • 1或100%：原始亮度
  • <1：变暗

  • 1：变亮

  • 0：全黑

• 示例：

filter: brightness(1.2); /* 亮度提高20% */
filter: brightness(80%); /* 亮度降低20% */

4. contrast() 对比度调节

• 作用：调整图像对比度

• 参数：数值或百分比

  • 1或100%：原始对比度
  • <1：降低对比度

  • 1：提高对比度

  • 0：完全灰

• 示例：

filter: contrast(0.8); /* 对比度降低20% */
filter: contrast(120%); /* 对比度提高20% */

5. sepia() 棕褐色滤镜

• 作用：将图像转换为棕褐色调（复古效果）

• 参数：0%到100%之间的值

  • 0%：原始图像
  • 100%：完全棕褐色

• 示例：

filter: sepia(0.3); /* 30%棕褐色效果 */
filter: sepia(100%); /* 完全复古效果 */

其他重要滤镜函数

6. hue-rotate() 色相旋转

• 作用：改变图像的整体色调

• 参数：角度值（deg）

  • 0deg：无变化
  • 360deg：完整色环旋转

• 示例：

filter: hue-rotate(90deg); /* 色调旋转90度 */

7. saturate() 饱和度调节

• 作用：调整图像颜色饱和度

• 参数：数值或百分比

  • 1或100%：原始饱和度
  • <1：降低饱和度

  • 1：增加饱和度

  • 0：完全去色（与grayscale(100%)类似）

• 示例：

filter: saturate(1.5); /* 饱和度提高50% */

8. opacity() 透明度调节

• 作用：调整图像透明度

• 参数：0到1之间的值

  • 1：完全不透明
  • 0：完全透明

• 注意 ：与opacity属性不同，filter: opacity()在某些浏览器中可能有更好的性能

• 示例：

filter: opacity(0.7); /* 70%不透明 */

9. invert() 颜色反转

• 作用：反转图像颜色

• 参数：0%到100%之间的值

  • 0%：原始图像
  • 100%：完全反转

• 示例：

filter: invert(100%); /* 完全反转颜色 */

10. drop-shadow() 投影效果

• 作用 ：为图像添加投影（比box-shadow更符合图像轮廓）

• 参数 ：与box-shadow类似，但不支持inset和spread

  • drop-shadow(offset-x offset-y blur-radius color)

• 示例：

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

组合使用多个滤镜

可以组合多个滤镜函数，按顺序应用效果：

.complex-filter {
  filter: 
    brightness(1.1)
    contrast(1.2)
    saturate(1.3)
    hue-rotate(15deg)
    drop-shadow(2px 2px 5px #333);
}