一、滤镜效果概述

CSS3的filter属性用于对元素应用图形效果，如模糊、亮度调整、对比度增强等，无需依赖图片编辑软件即可实现复杂视觉效果。该属性支持多种滤镜函数组合，可作用于图片、文字、背景等任何HTML元素，广泛应用于图片处理、交互动效和主题切换场景。

二、核心语法与取值

2.1 基础语法

/* 单个滤镜 */
.element {
  filter: blur(5px);
}

/* 多个滤镜组合（空格分隔） */
.element {
  filter: brightness(1.2) contrast(1.5) grayscale(0.5);
}

/* 重置滤镜 */
.element {
  filter: none;
}

2.2 常用滤镜函数及取值

滤镜函数 作用 取值范围/说明 示例
blur(px) 高斯模糊 数值（px），值越大越模糊 blur(5px)（5像素模糊）
brightness(%) 亮度调整 0%（全黑）~ 100%（原图）~ ∞（更亮） brightness(150%)（亮度提升50%）
contrast(%) 对比度调整 0%（全灰）~ 100%（原图）~ ∞（更高） contrast(200%)（对比度提升100%）
grayscale(%) 灰度转换 0%（原图）~ 100%（全灰） grayscale(80%)（80%灰度）
hue-rotate(deg) 色相旋转 角度（0deg~360deg），0deg为原图 hue-rotate(90deg)（色相旋转90度）
invert(%) 颜色反转 0%（原图）~ 100%（完全反转） invert(100%)（完全负片效果）
opacity(%) 透明度调整 0%（完全透明）~ 100%（不透明） opacity(50%)（半透明）
saturate(%) 饱和度调整 0%（无饱和）~ 100%（原图）~ ∞（更高） saturate(200%)（饱和度提升100%）
sepia(%) 褐色调（复古效果） 0%（原图）~ 100%（全褐色） sepia(70%)（70%复古褐色）
drop-shadow(h v b c) 阴影效果（类似box-shadow） h（水平偏移）、v（垂直偏移）、b（模糊）、c（颜色） drop-shadow(2px 2px 4px rgba(0,0,0,0.5))

三、实战示例

3.1 基础滤镜效果

示例1：图片模糊与亮度调整

<div class="filter-demo">
  <img src="nature.jpg" alt="自然风景" class="original">
  <img src="nature.jpg" alt="模糊效果" class="blur">
  <img src="nature.jpg" alt="高亮度效果" class="bright">
</div>

<style>
.filter-demo {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.filter-demo img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

.blur {
  filter: blur(3px); /* 3像素模糊 */
}

.bright {
  filter: brightness(1.3); /* 亮度提升30% */
}
</style>

3.2 组合滤镜效果

示例2：复古照片风格（褐色调+对比度+饱和度）

<div class="vintage-photo">
  <img src="portrait.jpg" alt="人物肖像">
</div>

<style>
.vintage-photo img {
  width: 400px;
  filter: 
    sepia(60%) /* 60%褐色调 */
    contrast(120%) /* 对比度提升20% */
    saturate(80%) /* 饱和度降低20% */
    brightness(90%); /* 亮度降低10% */
  border-radius: 8px;
}
</style>

3.3 交互动效中的滤镜应用

示例3：按钮悬停时的灰度转彩色效果

<button class="filter-btn">
  <span>关注我们</span>
</button>

<style>
.filter-btn {
  padding: 12px 24px;
  background: #4CAF50;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: filter 0.3s ease;
  /* 默认灰度 */
  filter: grayscale(100%);
}

.filter-btn:hover {
  /* 悬停时恢复彩色 */
  filter: grayscale(0%);
}
</style>

四、注意事项

4.1 性能优化

  • 避免过度使用：多个滤镜组合会增加浏览器计算负担，可能导致动画卡顿，建议在关键帧动画中减少滤镜数量。
  • 硬件加速：对应用滤镜的元素添加transform: translateZ(0)可触发GPU加速，但需注意内存占用。

4.2 兼容性处理

  • 浏览器支持：现代浏览器（Chrome 53+、Firefox 35+、Edge 12+）完全支持，IE不支持filter属性。
  • 降级方案：对不支持的浏览器，可使用JavaScript检测并提供替代样式：
    if (!CSS.supports('filter', 'blur(5px)')) {
  document.querySelector('.target').classList.add('no-filter-fallback');
}

4.3 与其他属性的区别

  • filter: drop-shadow() vs box-shadow：
    • drop-shadow可作用于元素的透明区域（如PNG图片的非矩形部分），而box-shadow仅作用于元素的盒模型边界。
    • drop-shadow性能略低于box-shadow，优先使用box-shadow实现简单阴影。

五、自测题

  1. 如何使用filter属性实现一张图片的"黑白照片"效果？
    A. filter: grayscale(100%)
    B. filter: invert(100%)
    C. filter: sepia(100%)
    答案：A

  2. 以下哪个滤镜组合可实现"高对比度黑白图片"效果？
    A. filter: grayscale(100%) contrast(150%)
    B. filter: brightness(120%) saturate(0%)
    C. filter: invert(100%) blur(1px)
    答案：A

  3. 简述filter: opacity(50%)与opacity: 0.5的区别。
    答案：两者视觉效果相同，但filter: opacity()会触发GPU加速，可能影响性能；opacity属性兼容性更广泛（IE8+支持）。