CSS 如何实现图片彩色投影效果？

Question

CSS 如何实现图片彩色投影效果？

仓乃文 · Accepted Answer

利用 filter: blur() 模糊滤镜配合伪元素，可以给图片生成与原图颜色相仿的彩色阴影效果，突破 box-shadow 只能生成单色阴影的限制。

```css
.image-with-shadow {
  position: relative;
  background: url(image.jpg) no-repeat center center;
  background-size: 100% 100%;
}

.image-with-shadow::after {
  content: ";
  position: absolute;
  top: 10%;
  width: 100%;
  height: 100%;
  background: inherit;
  background-size: 100% 100%;
  filter: blur(10px) brightness(80%) opacity(.8);
  z-index: -1;
}
```

补充说明：
- 关键滤镜组合：filter: blur(10px) brightness(80%) opacity(.8)
- blur 值越大阴影越模糊扩散，brightness 控制阴影明暗度
- 适合不规则形状或图片元素的彩色投影
- 伪元素通过 background: inherit 继承原图，保持色彩一致