使用前景图像作为背景图像的 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

这里需要使用 mask：img {&nbsp; -webkit-mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");&nbsp;&nbsp;&nbsp; -webkit-mask-size: 100% auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mask-size: 100% auto;&nbsp; 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 {&nbsp; -webkit-mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");&nbsp;&nbsp;&nbsp; -webkit-mask-size: 100% auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mask-size: 100% auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; mix-blend-mode: multiply;&nbsp; width: 100px;&nbsp; display:block;}.box {&nbsp; background-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");&nbsp; background-size:100% auto;&nbsp; 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>