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
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ