Как сделать наложение в css

Наложение элементов (overlay) в CSS можно реализовать с помощью свойства position и z-index. Вот пример кода для создания наложения с картинкой на фоновом изображении:

HTML:

<div class="overlay">
  <h1>Заголовок</h1>
  <p>Описание</p>
</div>

CSS:

.overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

.overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("фоновое-изображение.jpg");
  background-size: cover;
  filter: brightness(50%);
  z-index: 1;
}

.overlay h1, .overlay p {
  position: relative;
  z-index: 2;
  color: #fff;
}

.overlay p {
  font-size: 20px;
}

Здесь мы используем псевдоэлемент ::before и задаем ему фоновое изображение с помощью свойства background-image. Также мы устанавливаем свойство filter для настройки яркости изображения на 50%, чтобы сделать его темнее и лучше подходящим для наложения.

Затем мы задаем высоту и ширину для наложения, устанавливаем родительский элемент как position: relative, а затем устанавливаем позицию для псевдоэлемента с position: absolute.

С помощью свойства z-index мы устанавливаем порядок наложения элементов. Значение z-index для псевдоэлемента ::before установлено на 1, что позволяет ему находиться «под» заголовком и текстом.

Чтобы добавить содержимое наложения, мы устанавливаем z-index для элементов заголовка и текста с помощью свойства z-index.

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