html - HTML 和 CSS 只能创建一个自动忽略图像透明区域的叠加层吗？

Question

例如，它有一张透明背景的图片:

我想在上面添加一个灰色覆盖层(例如，div 或 Canvas ...):

但我希望叠加层自动忽略图像上的透明区域:

纯 HTML 和 CSS(例如，通过 div、canvas...)可以做到这一点吗？

Answer 1

尝试叠加混合模式。或者乘以! (IE 或 Edge 不支持，感谢@Stilltorik)

.multiplied {
  background-color: blue;
  width:250px;
  height: 100px;
  margin-top: -100px;
  mix-blend-mode: overlay;
}

<div>
  <img src='/image/4yUEW.png'/>
  <div class='multiplied'></div>
</div>