Как наложить изображение на изображение CSS

Для наложения одного изображения на другое в CSS можно использовать свойство background-image и задать два изображения через запятую. Например:

.container {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: center center, top left;
  background-repeat: no-repeat;
}

В данном примере мы задали два изображения image1.jpg и image2.jpg через запятую. Первое изображение будет находиться в центре контейнера, а второе — в левом верхнем углу. Оба изображения не будут повторяться.

Также можно использовать свойство z-index для управления порядком наложения изображений. Чем больше значение z-index, тем выше будет находиться изображение.

.container {
  position: relative;
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.image2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

В данном примере мы задали два изображения с помощью классов .image1 и .image2. Первое изображение будет находиться в левом верхнем углу контейнера, а второе — в центре. Второе изображение будет находиться выше первого благодаря свойству z-index.

Обратите внимание, что для использования свойства z-index необходимо задать свойство position со значением relative или absolute для элемента.