css - 在图像上创建 CSS 透明蒙版

Question

是否可以在 CSS 中创建这样的 alpha 蒙版(f.ex:http://www.script-tutorials.com/demos/360/images/twinkling.png)，然后将其应用于下面的背景图像？

---

编辑:我将提供更多背景信息，因为我认为我正在得到另一个问题的答案。上面链接的图像在图像顶部重叠了一些黑色圆圈。问题是它总是使用黑色，如果背景图像有黑色 bakground，它工作正常(它隐藏 bg 图像)。如果背景图像有 f.ex，问题就来了。蓝色背景。然后图像将在 bg 图像上重叠黑色圆圈，并且不会产生预期的掩蔽效果。给出一个想法:

所以我正在尝试的是将圆圈作为 alpha channel ，这适用于下图。所以不是透明的黑色，而是黑色和白色，就像应用于下图的 alpha channel 。

请注意，将有 2 个图层:例如，一张图像中的猕猴桃具有透明背景和黑色背景。或者图像中的狗在另一个蓝色图像下方。所以我需要的是适用于奇异果或狗图像的面具。

Answer 1

您可以创建一个具有图像背景的“div”，然后在其上应用叠加层:

HTML:

<div class="myDiv">
  <div class="overlay"></div>
</div>

CSS:

.myDiv{
  height:333px;
  width:333px;
  background:url('https://www.catamaransailing.holiday/blog/wp-content/uploads/2015/10/saltwistlebay-3-333x333.jpg');
}
.overlay{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.3);
}

在这里 fiddle :https://jsfiddle.net/x0n9hj4z/

希望这就是你想要的。