HTML和CSS是否只能创建一个覆盖，自动忽略图像上的透明区域？

例如，它具有透明背景的图像：

我想在上面添加一个灰色覆盖层（例如，一个div或canvas…）：

但我希望覆盖自动忽略图像上的透明区域：

---

纯HTML和CSS（例如，按div、canvas…）可以做到这一点吗？

尝试叠加混合模式。还是乘！ （IE或Edge不支持，谢谢@Stilltorik）

{
背景颜色：蓝色；
宽度：250px；
高度：100px；
利润上限：-100px；
混合模式：叠加；
}

有点老套的方式：


.alpha掩码{
掩码图像：url(https://i.stack.imgur.com/FwTzE.png);
-webkit掩码图像：url(https://i.stack.imgur.com/FwTzE.png);
掩模模式：alpha；
-webkit掩码模式：alpha；
面罩重复：不重复；
-webkit掩码重复：无重复；
}
.覆盖{
背景色：#000；
位置：绝对位置；
顶部：120px；
左：0；
宽度：100%；
身高：100%；
不透明度：0.2；
}
在不知道这个问题的完整用例的情况下，我会说答案是“是的，但是跨浏览器兼容性会很麻烦。”

这里发布的另外两个答案说明了如果兼容性不是一个问题，那么它可能实现的方法，但我认为这可以通过一些创造性的photoshop和分层元素来实现

我要做的是：

Photoshop：
把你的基础图像（我假设它是PNG，因为它有一个alpha通道）加载到photoshop中。选择要遮罩的区域。编辑>复制合并。创建新图层并编辑>粘贴。将此新层的颜色更改为您希望遮罩覆盖的颜色，并添加alpha通道效果。确保关闭默认背景，然后将新图层另存为PNG

HTML:

在本例中，容器的尺寸与图像和遮罩的尺寸相同非常重要，以便绝对定位将遮罩正确地对准图像。将图像制作成背景可以让你在div中填充像type这样的内容。这样做的主要优点是，它可以在几乎所有浏览器上使用，而不是使用此处其他地方建议的CSS。
是一种基于画布的方法：

HTML:

你可以使用SVG来实现这一点，但这基本上是通过图像实现的。不过要小心，IE或edge不支持这一点：非常接近，但不幸的是，没有任何可用的混合模式能够精确地再现所需的结果。它还高度依赖于图像和图像出现的背景。这些内容是否重要取决于提问者，尽管从上面乏味的“+1”评论来看，显然有18位其他用户没有注意到或不关心。感谢您注意到Edge&IE不支持这些内容。我正在编辑@是的。这正是我提出两者的原因。我不知道任何其他方法来实现这样的渲染，所以我通常会搞乱混合模式和颜色本身，以获得适当的结果和正确的最终颜色。确实不是理想的方法，但最简单，没有太多副作用。
<div class="container">
  <div class="original-image"></div>
  <div class="mask"></div>
</div>

.container {
  height: 300px;
  width: 300px;
  position: relative;
}

.original-image {
  height: 300px;
  width: 300px;
  background : url(../images/myimage.png) no-repeat top center;
}

.mask {
  height: 300px;
  width: 300px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1; //or more depending on what else is going on in the layout
  background : url(../images/mask.png) no-repeat top center;
}

<canvas id="canvas" width="500" height="500"></canvas>

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var star = new Image();
star.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Light_blue_star.svg/500px-Light_blue_star.svg.png";

star.onload = function() {
  //Draw our image on the canvas
  ctx.drawImage(star, 0, 0);
  //Blend a rectangle over it
  ctx.fillStyle = '#f00ba2';
  ctx.globalCompositeOperation = "multiply";
  ctx.fillRect(0, 250, 500, 250);
  //Clip the output with the non transparent pixels of the original image with destination-in compositing mode
  ctx.globalCompositeOperation = "destination-in";
  ctx.drawImage(star, 0, 0);
}