css - 透明图像上的阴影和背景色

Question

设置背景会导致投影滤镜忽略自由形式并将其仅应用于图像矩形轮廓。

img {
  background: lightgreen;
  filter: drop-shadow(0 0 10px red);
}

参见 https://jsbin.com/zoseru/2/edit?css,output

Answer 1

这可以使用 SVG 过滤器来实现:

<!-- in your html -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filterdef">
  <filter id="background" x="0" y="0" width="100%" height="100%">
    <feFlood flood-color="lightgreen" result="bg"></feFlood>
    <feComposite in2="bg" in="SourceGraphic"></feComposite>
  </filter>
</svg>

---

// css
img {
  filter: drop-shadow(0 0 10px red) url(#background);
}

请注意过滤器的顺序很重要。

https://jsbin.com/zoseru/3/edit?html,css,output