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

Question

例如,它有一个透明背景的图像:

我想在其上添加一个灰色叠加层(例如,div或画布......):

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

纯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='https://i.stack.imgur.com/4yUEW.png'/>
  <div class='multiplied'></div>
</div>