Как наложить картинку на текст?

Question

[Cubeden_UA]

У меня есть title и там 4 слова и на одно из них нужно наложить картинку флага, как это сделать?

Comments

[Антон Литвиненко]

завернуть тайтл и картинку флага в елемент с позишн релатив, флагу дать абсолют и спозиционировать как нужно

[Cubeden_UA]

Антон Литвиненко, вот так нужно

[RAX7]

https://www.geeksforgeeks.org/how-to-add-image-in-...

Answer 1

[Dino Winchester]

1. Оборачиваем нужное слово, например в тег <span сlass="element">Hello</span> и для удобства добавляем класс, по которому будет стилизовать элемент.
   
2. Так как тег span является строчным элементом, добавим ему свойство display со значением inline-flex или inline-block. Это нужно для получения корректных значений, при вычислении высоты и ширины элемента.
   
3. Задаём нужный font-size, font-family, line-height(можно добавить ещё font-weight, но это по желанию) и узнаем ширину и высоту элемента. При изменении размера шрифта - эти данные конечно будут меняться, но это наверняка не будет особой проблемой.
   
4. Задаём изображению флага - размеры высоты и ширины блока с текстом. Картинку можно даже сделать немного больше.
   

Теперь переходим к стилям 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 с текстом и заливкой в виде картинки.