Здравствуйте всем. Извините если вопрос глупый.
Суть:
Мне нужно создать маску для текста (Вставить изображение в текст), для этого вроде как идеально подходит background-clip: text, но этот текст состоит из двух элементов 0 и 1. Так вот мне нужно чтобы 0 и 1 всплывали отдельно, я пробую применить transform: translate, но когда я его добавляю цифра становится невидимой.
Вот:
<div class="numb">
<div class="numb__item-1">1</div>
<div class="numb__item-2">0</div>
</div>
<code lang="css">
</code>
.numb {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: "Barlow Semi Condensed";
font-weight: 500;
font-size: 250px;
color: transparent;
background-clip: text;
background-image: url('../img/picture/2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
.numb__item-1 {
transform: translate(0px, 80px);
}
Вот что выходит:
Почему transform и background-clip конфликтует? Может быть это невозможно сделать с background-clip.
Если нет, то как можно по другому встроить в эти цифры картинку, но важно чтобы она была отдельно от фона, так как я использую разные картинки для этих цифр и для фона
