- Оборачиваем нужное слово, например в тег
<span сlass="element">Hello</span> и для удобства добавляем класс, по которому будет стилизовать элемент.
- Так как тег span является строчным элементом, добавим ему свойство
display со значением inline-flex или inline-block. Это нужно для получения корректных значений, при вычислении высоты и ширины элемента.
- Задаём нужный font-size, font-family, line-height(можно добавить ещё font-weight, но это по желанию) и узнаем ширину и высоту элемента. При изменении размера шрифта - эти данные конечно будут меняться, но это наверняка не будет особой проблемой.
- Задаём изображению флага - размеры высоты и ширины блока с текстом. Картинку можно даже сделать немного больше.
Теперь переходим к стилям CSS:
.element {
background-image: url(./image.jpg);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 50px;
line-height: 50px;
display: inline-flex;
font-family: "Roboto", sans-serif;
}
Через группу свойств:
background-image: url(./picture.jpg);
background-repeat: no-repeat;
background-size: cover;
Задаём фоновое изображение для элемента(для текста) и настраиваем дополнительные параметры отображения бекграунда. Если вдруг нужно отцентрировать изображение по вертикали или горизонтали, используем предназначенные для этого свойства:
background-position-x или
background-position-y.
Основную работу выполняют следующие свойства:
-webkit-text-fill-color и
background-clip, которые создают эффект прозрачности, что позволяет использовать бекграунд элемента в качестве фона для текста. Однако можно обойтись и без свойства
-webkit-text-fill-color, заменив его следующей строчкой
color: transparent.
Однако, смотрим поддержку данных свойств:
-webkit-text-fill-color
-webkit-background-clip
И если текущее состояние не устраивает, используем SVG с текстом и заливкой в виде картинки.
Простой
