CSS3怎么实现图片滤镜

在 CSS3 中，可以使用 filter 属性来实现图片滤镜效果，这是最常见的做法。下面我按常用滤镜 → 示例 → 进阶用法来讲解。

一、CSS3 常用图片滤镜

1️⃣ 灰度（黑白）

img {
  filter: grayscale(100%);
}

• 0%：原图
• 100%：完全黑白

2️⃣ 模糊

img {
  filter: blur(5px);
}

• 数值越大越模糊

3️⃣ 亮度

img {
  filter: brightness(1.2);
}

• 1：原图
• <1：变暗
• >1：变亮

4️⃣ 对比度

img {
  filter: contrast(150%);
}

5️⃣ 饱和度

img {
  filter: saturate(200%);
}

• 0%：黑白
• 100%：原色
• >100%：更鲜艳

6️⃣ 色相旋转

img {
  filter: hue-rotate(90deg);
}

• 改变颜色基调

7️⃣ 反色（底片效果）

img {
  filter: invert(100%);
}

8️⃣ 阴影（类似投影）

img {
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
}

✅ 与 box-shadow 不同，它会跟随图片透明区域

二、组合多个滤镜

img {
  filter: grayscale(100%) brightness(1.2) contrast(120%);
}

⚠️ 顺序会影响最终效果

三、配合 hover 动画（常见效果）

img {
  transition: filter 0.3s ease;
}

img:hover {
  filter: grayscale(0%) brightness(1.1);
}

四、完整示例

<img src="photo.jpg" class="filter-img">

.filter-img {
  width: 300px;
  filter: saturate(0.5) contrast(120%);
  transition: filter 0.4s;
}

.filter-img:hover {
  filter: saturate(1.2) contrast(100%);
}

五、兼容性说明

✅ 支持现代浏览器（Chrome / Edge / Firefox / Safari）
❌ IE 不支持（可用 JS 或 SVG 替代）

六、如果你需要更复杂的效果

• 多图片叠加滤镜 → 使用 ::before / ::after
• 老照片 / 胶片风 → 组合 sepia + contrast + brightness
• 性能优化 → 避免大面积 blur()

如果你愿意，可以告诉我：

• 想做哪种风格（复古 / 电影感 / 梦幻 / 高级灰）
• 是静态图片还是 hover / 动画效果

我可以直接帮你写一套完整 CSS ✅