Для наложения одного изображения на другое в 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 для элемента.





