Используйте изображение переднего плана в качестве альфа-маски для фонового изображения

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>