Добавление фонового изображения к тексту.

В этом уроке мы рассмотрим, как добавить фоновое изображение в текст, причем это может быть любое изображение по вашему выбору.

Я уже разместил полный видеоурок на своем канале YouTube, и вы можете посмотреть его там.

А теперь давайте перейдем непосредственно к делу!

Интерфейс, который нас ожидает

Здесь мы будем иметь дело только с 2 файлами: index.html и styles.css.

НАСТРОЙКА HTML
Мы добавим наш стандартный HTML-шаблон и подключим внешнюю таблицу стилей (styles.css).

<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> </body>
</html>

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы добавим тег h1 в тело нашего HTML

<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> 
 <h1>Hello World!</h1>
</body>
</html>

Вход в полноэкранный режим Выйти из полноэкранного режима

И это все для нашего HTML

Добавление стилей в наш HTML
Первое, что мы хотим сделать, это немного увеличить размер шрифта, я установлю его на 100px

h1{
   font-size:100px;
  }

Вход в полноэкранный режим Выход из полноэкранного режима

Затем мы добавим фоновое изображение с сайта Pexels.

h1{
  ...
 background:url(https://images.pexels.com/photos/7422479/pexels-photo-7422479.jpeg?cs=srgb&dl=pexels-nothing-ahead-7422479.jpg&fm=jpg)

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь у нас будет такой интерфейс:

Но мы скорее хотим, чтобы изображение было на фоне текста, а не так, вот как это реализовать

h1{
  ...
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Наконец, мы должны получить ожидаемый результат при предварительном просмотре в браузере.

Заключение

Спасибо, что дочитали до конца!
Видеоверсию этого руководства вы можете посмотреть здесь.
Если вам понравилась эта статья, присоединяйтесь ко мне в Twitter.