Как наложить фон на фон css
Чтобы наложить фон на фон в CSS, можно использовать псевдоэлементы и абсолютное позиционирование
Пример:
<body>
<div class="bg"></div>
</body>
/* Нижний фон */
.bg:before {
background-color: #ff0000 ;
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
content: '';
}
/* верхний фон */
.bg:after {
content: '';
background-color: #ff0 ;
display: block;
width: 212px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
/* Чтобы увидеть что фон наложишься поверх другого сделаем фон немного прозрачным */
opacity: 50%;
}
Результат наложения будет выглядеть следующим образом:
Чтобы наложить один фон на другой в CSS, можно использовать свойство background и указать несколько значений для него, разделяя их запятыми. Первый параметр указывает на задний фон, а последующие параметры будут наложены сверху.
Вот пример кода, демонстрирующий наложение фонов:
.background {
background:
url('background1.jpg') center center/cover no-repeat,
url('background2.jpg') center center/cover no-repeat;
}
В этом примере background1.jpg является задним фоном, а background2.jpg наложен поверх него. С помощью ключевого слова center center мы устанавливаем позицию фона по центру холста, cover обеспечивает его масштабирование так, чтобы он занимал всю доступную площадь, а no-repeat предотвращает повторение фонового изображения.
Вы можете настраивать параметры фона (позиционирование, повторение, масштабирование) в зависимости от ваших потребностей.
