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

Question

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

我想在其上添加灰色叠加层（例如，div或画布......）：

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

纯HTML和CSS（例如div，canvas ......）可以这样做吗？

Answer 1

尝试叠加混合模式。或者倍增！ （IE或Edge不支持，感谢@Stilltorik）

＆＃13;

＆＃13;

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

＆＃13;

<div>
  <img src='https://i.stack.imgur.com/4yUEW.png'/>
  <div class='multiplied'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有点愚蠢的方式：

＆＃13;

＆＃13;

.alpha-mask {
  mask-image: url(https://i.stack.imgur.com/FwTzE.png);
  -webkit-mask-image: url(https://i.stack.imgur.com/FwTzE.png);
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.overlay {
  background-color: #000;
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

＆＃13;

<article class="alpha-mask">
  <img class="alpha-target" src="https://i.stack.imgur.com/FwTzE.png" />
  <div class="overlay alpha-target">
  </div>
</article>

＆＃13;

＆＃13;

＆＃13;

See it working

Answer 3

在不知道这个问题的完整用例的情况下，我会说答案是“是的，但是跨浏览器的兼容性会很麻烦。”

此处发布的另外两个答案显示了如果兼容性不是问题可以实现的方式，但我认为这可以通过一些创意的Photoshop和分层元素更简单地完成。

我会做什么：

Photoshop中： 拿你的基本图像（我假设它是PNG，因为它有一个alpha通道）并将其加载到photoshop中。选择要屏蔽的区域。编辑＆gt;复制合并。创建一个新图层并编辑＆gt;糊。将此新图层的颜色更改为您想要遮罩的叠加层的颜色，并添加Alpha通道效果。确保关闭默认背景，然后将新图层另存为PNG。

HTML：

<div class="container">
  <div class="original-image"></div>
  <div class="mask"></div>
</div>

CSS：

.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;
}

在此示例中，重要的是容器具有与图像和蒙版相同的尺寸，以便绝对定位可以正确地将蒙版与图像对齐。将图像制作成背景允许您使用类型等内容填充div。这样做的主要优点是，这应该适用于几乎所有的浏览器。而不是使用其他地方建议的CSS。

Answer 4

Here是基于画布的方法：

HTML：

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

JS：

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);
}