4.1 Основные принципы
CSS позволяет использовать несколько фоновых изображений в одном элементе, что открывает широкий спектр возможностей для создания сложных и интересных визуальных эффектов. С помощью свойства background-image и связанных с ним свойств можно задавать несколько слоев фоновых изображений, управляя их порядком, позицией и другими характеристиками.
Синтаксис
Для задания нескольких фоновых изображений используется синтаксис, в котором различные изображения перечисляются через запятую:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Свойства для настройки каждого уровня
Помимо background-image, для настройки каждого слоя фонового изображения используются следующие свойства, которые также поддерживают множественные значения, разделенные запятыми:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Порядок слоев
Изображения накладываются друг на друга в том порядке, в котором они перечислены: первое изображение находится выше остальных (то есть ближе к пользователю), а последнее — под всеми, ближе к "тылу" элемента.
4.2 Наложение изображений
Простое наложение изображений.
Пример использования:
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://cdn.javarush.com/images/article/004d49c8-42ce-44f1-8163-60206bda8c7e/256.jpeg'), url('https://cdn.javarush.com/images/article/d0a0d816-0540-4fdd-81bc-7637483839c1/256.jpeg');
background-size: 45% 45%, 45% 45%;
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
.multi-bg {
width: 300px;
height: 300px;
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg"></div>
</body>
Объяснение кода:
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');: задает два фоновых изображенияbackground-position: center, top left;: центрирует первое изображение и располагает второе изображение в верхнем левом углуbackground-repeat: no-repeat, no-repeat;: отключает повторение для обоих изображений
4.3 Использование нескольких изображений
Использование нескольких фоновых изображений с разными размерами.
Пример использования:
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://cdn.javarush.com/images/article/004d49c8-42ce-44f1-8163-60206bda8c7e/256.jpeg'), url('https://cdn.javarush.com/images/article/d0a0d816-0540-4fdd-81bc-7637483839c1/256.jpeg');
background-position: top left, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 60% 60%, 50% 50%;
border: 1px solid #000;
}
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');
background-position: top left, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 60% 60%, 50% 50%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes"></div>
</body>
Объяснение кода:
background-size: 60% 60%, 50% 50%;: масштабирует первое изображение до 60% ширины и высоты элемента, а второе изображение до 50% ширины и высоты элемента
4.4 Прозрачный фон
Иногда может понадобится дать прозрачности фону или изображениям на фоне елемента. Если мы применим свойство opacity к самому элементу мы получим не совсем то, что ожидали: прозрачным станет весь элемент, а не только фон (логично). Мы воспользуемся простейшим "хаком" и сделаем это с помощью ::before:
.multi-bg-opacity {
width: 600px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://cdn.javarush.com/images/article/004d49c8-42ce-44f1-8163-60206bda8c7e/256.jpeg'), url('https://cdn.javarush.com/images/article/d0a0d816-0540-4fdd-81bc-7637483839c1/256.jpeg');
background-position: top left, top right;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
opacity: 0.2;
}
.multi-bg-opacity {
width: 600px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');
background-position: top left, top right;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
opacity: 0.2;
}
<body>
<div class="multi-bg-opacity">
Тут какой-то оооооооооооооооооооооооооооооооооооооооооооооооооочень длинный, интересный
текст! Обрати внимание: фон его не перекрывает 👽🐤
</div>
</body>
Объяснение кода:
- псевдоэлемент
::beforeдобавляет почти прозрачный фон с картинками нашему элементу background-size: contain, contain;: масштабирует фоновые изображения таким образом, чтобы они "залили" элемент, сохраняя пропорции
4.5 Обрезка фона
Использование других свойств с несколькими фоновыми изображениями.
background-origin и background-clip
Эти свойства управляют областью, в которой отображается фоновое изображение, и областью обрезки фона.
Пример использования:
.multi-bg-origin-clip {
width: 600px;
height: 300px;
background-image: url(https://cdn.javarush.com/images/article/004d49c8-42ce-44f1-8163-60206bda8c7e/256.jpeg), url(https://cdn.javarush.com/images/article/d0a0d816-0540-4fdd-81bc-7637483839c1/256.jpeg);
background-position: -85px 0, 430px bottom;
background-repeat: no-repeat, no-repeat;
background-size: 256px, 256px;
background-origin: border-box, content-box;
background-clip: padding-box, content-box;
border: 15px solid black;
padding: 30px;
margin: 20px;
}
.multi-bg-origin-clip {
width: 600px;
height: 300px;
background-image: url('./img/emoji-alien.jpg'), url('./img/emoji-baby-chick.jpg');
background-position: -85px 0, 430px bottom;
background-repeat: no-repeat, no-repeat;
background-size: 256px, 256px;
background-origin: border-box, content-box;
background-clip: padding-box, content-box;
border: 15px solid black;
padding: 30px;
margin: 20px;
}
<body>
<div class="multi-bg-origin-clip"></div>
</body>
Объяснение кода:
background-origin: padding-box, content-box;: первое изображение начинается от внутреннего края padding, второе изображение — от содержимого элементаbackground-clip: border-box, padding-box;: первое изображение обрезается по внешнему краю границы, второе изображение - по внутреннему краю padding
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ