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

  -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>