Фоновое изображение для текстуры текста

Рейтинг: 0Ответов: 1Опубликовано: 17.04.2023

Как сделать цвет шрифта из картинки "камуфляжный стиль" на темном фоне?

введите сюда описание изображения

css html
Источник: Stack Overflow на русском

Ответы

▲ 2

Используйте CSS-свойство -webkit-background-clip со значением text :

@import url('https://fonts.googleapis.com/css2?family=Emblema+One&display=swap');

body { background: #010111; }

.clip {
  font: 18vw/90vh 'Emblema One', cursive;
  text-align: center;
  background: 0 0 / cover url('https://i.sstatic.net/HzhCf.png');
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 2px yellow);
}

.clip::before, .clip::after { content: '\2606'; text-shadow: 0 0 2px red; }
<div class="clip">ARMOR</div>