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

Для наложения текста на картинку в CSS можно использовать свойство background-image и свойство background-clip.

Пример:

HTML:

<div class="image-with-text">
  <h2>Заголовок</h2>
</div>

CSS:

.image-with-text {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  position: relative;
}

.image-with-text h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3rem;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

В данном примере мы создаем блок с классом image-with-text, который имеет задний фон в виде картинки. Затем мы добавляем заголовок h2 внутрь этого блока и позиционируем его абсолютно в центре блока с помощью свойств top, left и transform.

Для того, чтобы текст заголовка был виден на заднем фоне картинки, мы используем свойство background-clip со значением text. Это позволяет наложить задний фон только на текст, а не на весь блок.

Также мы используем префиксы -webkit- для поддержки браузеров Safari и Chrome.