Question

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

修改我将提供更多背景知识，因为我认为我得到了另一个问题的答案。上面链接的图像与图像顶部的一些黑色圆圈重叠。问题是它总是使用黑色，如果背景图像有黑色bakground，它工作正常（它隐藏了bg图像）。如果背景图像有f.ex.蓝色背景。然后图像将与bg图像上的黑色圆圈重叠，并且它不会产生预期遮罩的效果。提出一个想法：

所以我想要的是将圆圈作为alpha通道，对下面的图像起作用。所以不是黑色的透明度，而是黑色和白色，就像应用于下面图像的alpha通道一样。

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

Answer 1

你可以创建一个＆＃34; div＆＃34;具有图像背景，然后在其上应用叠加：

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

在这里小提琴：https://jsfiddle.net/x0n9hj4z/

希望这就是你想要的。

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>

不幸的是，大多数浏览器都不支持pseudo-elements on img标记。

Answer 3

尝试使用mask-image（和-webkit-mask-image）属性。他们需要以下任何一个作为值：

线性渐变[W3Schools link] [MDN link]
径向渐变[W3Schools link] [MDN link]
具有透明部分的png图片
带有透明部分的svg图片

[General tutorial for masking]

您的选择可能是png或svg图像，因为圆圈似乎并不是完美的圆形。

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

在图像上创建CSS透明蒙版

3 个答案: