在图片上创建CSS透明蒙版

Question

在CSS中创建像这样的alpha遮罩（例如：http://www.script-tutorials.com/demos/360/images/twinkling.png），并将其应用于下面的背景图像，是否可能？

---

编辑： 我将提供更多背景信息，因为我认为我得到了一个不同问题的答案。上面链接的图片是在图像顶部重叠一些黑色圆圈来制作的。问题在于它总是使用黑色颜色，如果背景图像有黑色背景，它会正常工作（隐藏背景图像）。但如果背景图像有如蓝色背景等其他背景颜色，那么它将在背景图像上重叠黑色圆圈，并且无法创建所需的遮罩效果。为了明确这一点： 所以我正在尝试获取圆圈作为alpha通道，可以用于下面的图像。因此，不是带透明度的黑色，而是像应用于下面图像的alpha通道一样的黑白色。

请注意，将有2个图层：例如，奇异果图像中有一个带透明背景的图像，在下面是黑色背景。或者狗在一张图像中，在下面是另一个蓝色图像。因此，我需要一个应用于奇异果或狗图像的遮罩。

- user1156544

---

你可以尝试使用CSS3的opacity属性。透明度可以从0.0到1.0变化。 例如： .image{ opacity:0.3; } - Jijo Cleetus

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/

希望这是你想要的。

- Theo Orphanos

Answer 2

这是我的解决方案：

figure {
  position: relative;
}
.ink::after {
  content: url(http://www.script-tutorials.com/demos/360/images/twinkling.png);
  opacity: 0.5;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
}

<figure class="ink">
  <img src="http://placehold.it/100x100">
</figure>

不幸的是，大多数浏览器不支持在img标签上使用伪元素。

- Tymek

Answer 3

尝试使用mask-image（和-webkit-mask-image）属性。 它们需要以下任一值：

• 线性渐变[W3Schools 链接][MDN 链接]
• 径向渐变[W3Schools 链接][MDN 链接]
• 带有透明部分的PNG图像
• 带有透明部分的SVG图像

[掩模通用教程]

您的选择可能是PNG或SVG图像，因为圆形似乎不完全圆形。

出于评论者所述的原因，我建议使用MDN资源。

- sisisisi

---

出于质量和准确性考虑，我强烈建议使用链接到MDN资源而不是链接到W3Schools资源。 - TylerH

@TylerH 完成了，添加了MDN链接。 - sisisisi