将前景图像用作背景图像的Alpha遮罩

Question

我正在尝试将两个图像（一个是gif）混合在一起，并且仅在显示前景图像的地方显示背景图像。

示例：如果前景图像是“ T”，背景图像是紫色的“ X”，我希望看到

我尝试使用背景混合模式，但是什么也没改变。

一些类似于我的代码，产生的结果我并未尝试实现：

img {
  background-image: url("https://content.mycutegraphics.com/graphics/alphabet/purple-alphabet-letter-x.png");
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  
  background-size: 100px auto;
  width: 100px;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Soccerball_mask_transparent_background.svg/760px-Soccerball_mask_transparent_background.svg.png" />

Answer 1

您需要在此处使用遮罩：

img {
  -webkit-mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
          mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
  
  -webkit-mask-size: 100% auto;
          mask-size: 100% auto;
  width: 100px;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Soccerball_mask_transparent_background.svg/760px-Soccerball_mask_transparent_background.svg.png" />

您还可以考虑使用额外的容器来保持混合效果：

img {
  -webkit-mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
          mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
  
  -webkit-mask-size: 100% auto;
          mask-size: 100% auto;
          
  mix-blend-mode: multiply;
  width: 100px;
  display:block;
}

.box {
  background-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
  background-size:100% auto;
  display:inline-block;
}

<div class="box"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Soccerball_mask_transparent_background.svg/760px-Soccerball_mask_transparent_background.svg.png" />
</div>