Как поместить текст на картинку CSS

Существует несколько способов поместить текст на картинку с помощью CSS:

1 С помощью свойства background-image и background-position:

<div class="image-with-text"></div>

.image-with-text {
  background-image: url("path/to/image.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  position: relative;
}

.image-with-text:before {
  content: "Текст на картинке";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
}

2. С помощью позиционирования элементов:

<div class="image-with-text">
  <img src="path/to/image.jpg" alt="Картинка">
  <div class="text-overlay">Текст на картинке</div>
</div>

.image-with-text {
  position: relative;
}

.image-with-text img {
  display: block;
  width: 100%;
  height: auto;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
}

3. С помощью свойства clip-path:

<div class="image-with-text">
  <img src="path/to/image.jpg" alt="Картинка">
 div class="text-overlay">Текст на картинке</div>
</div>

.image-with-text {
  position: relative;
}

.image-with-text img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

.text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  color: #fff;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

Выберите подходящий для вас способ и примените его к своему проекту.