CSS background-blend-mode — накладання фонів
Властивість background-blend-mode встановлює режим накладання фонового шару до зображення. Наочно це продемонстровано на малюнку нижче.
Для накладання шарів обов'язковою умовою є те, щоб шарів було два чи більше. Якщо шарів задано більше двох, є можливість застосувати декілька режимів змішування перерахувавши їх через кому.
Якщо примітивно описати роботу цієї властивості, то за допомогою background-image ми задаємо кілька шарів, а потім background-blend-mode робить верхній шар напівпрозорим (звісно логіка складніша і накладання відбудеться за якимось алгоритмом), що дозволяє показати нижче покладені шари.
Властивість background-blend-mode аналогічний режимам накладення шарів в фотошопі, якщо Ви користувалися фотошопом то список можливих значень Вам здасться знайомим.
Ця властивість впливає лише на саме тло, а не на вміст елементу.
Інколи цю властивість використовують, щоб підігнати картинку під дизайн сайту. Для цього також можна використати фільтри.
автор: Svitlana
Загальний опис
автор: NagarD
Синтаксис
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;Властивість background-blend-mode може отримувати 10 значень:
-
normal -
Встановлює режим накладання normal
автор: Svitlana -
multiply -
Режим множення. Працює шляхом множення рівнів яскравості пікселів верхнього шару з пікселями нижчих шарів. Дуже добре підходить для створення тіней і видалення білих і інших світлих тонів (зберігаючи при цьому більш темні кольори). Множення будь-якого кольору на чорний дає чорний. Множення будь-якого кольору на білий зберігає оригінальний колір.
автор: Svitlana -
screen -
Режим екрану. Ефект аналогічний режиму
автор: Svitlanalightenз відзнакою в тому, що видаляє більше темних пікселів, створюючи плавний перехід. Працює як режимmultiply, але видаляє темні тони. -
overlay -
Режим перекриття. Використовує комбінацію режиму накладення
автор: Svitlanascreenдля більш світлих пікселів, і режим накладенняmultiplyдля темних пікселів. Так як режим працює в середньому діапазоні цих двох режимів, то півтони (50% сірого) стають прозорими. -
darken -
Режим затемнення. Якщо пікселі верхнього шару темніші, ніж на нижчих шарах, вони зберігаються в зображенні. Якщо пікселі в верхньому шарі світліші, вони замінюються на більш темні пікселі нижнього шару, тому в основному зберігаються темні тони всіх шарів.
автор: Svitlana -
lighten -
Режим заміни світлим. Темні пікселі верхнього шару замінюються на світлі пікселі нижчих шарів. Світлі пікселі не замінює.
автор: Svitlana -
color-dodge -
Режим освітлення основи. Насичує світлі тони і відблиски. Темні області зображення залишаються без змін.
автор: Svitlana -
saturation -
Режим насиченості. Створює колір з насиченістю початкового кольору і відтінком і яскравістю нижчого колірного фону. Сірі відтінки залишаються без змін.
автор: Svitlana -
color -
Режим кольоровості. Створює колір з відтінком і насиченістю початкового кольору і яскравість нижчого колірного фону. Зберігає сірі тони нижчих шарів.
автор: Svitlana -
luminosity -
Режим яскравості. Створює колір з яскравістю вихідного кольору і відтінком і насиченістю нижчого колірного фону. Ефект протилежний режиму
автор: Svitlanacolor.
| Значення без задання: | normal |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.backgroundBlendMode="screen" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 35 | 30 | 8 | 22 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 35 | 30 | 8 |
Приклади
+ запропонувати свій приклад у пісочниці
Обидва блоки мають той самий градієнт поверх темно-зеленого тла. У другому background-blend-mode: color змішує шари: відтінки лишаються від градієнта, а яскравість береться з кольору тла.
HTML
<div class="box normal">без змішування</div>
<div class="box blend">blend-mode: color</div>CSS
.box {
display: inline-block;
width: 180px;
height: 100px;
padding: 8px;
color: #fff;
background-image: linear-gradient(45deg, #ff8a00, #e52e71);
background-color: #004643;
}
.blend {
background-blend-mode: color;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>background-image</strong>.</p>
<p>Властивість background-image встановлює у якості фону зображення або градієнт. У цьому прикладі Ви мусите вибрати форму градієнту, а також два кольори (які будуть змішуватися). Ми будемо використовувати лінійний градієнт, але Ви можете використуватися будь-який інший Вам відомий.</p>
<strong>background-image: linear-gradient(</strong>
<select class="input" id="select">
<option value="to top" name="value2" selected>to top</option>
<option value="to left" name="value2">to left</option>
<option value="to right" name="value2">to right</option>
<option value="to bottom" name="value2">to bottom</option>
<option value="to right" name="value2">to right</option>
<option value="to top right" name="value2">to top right</option>
<option value="45deg" name="value2">45deg</option>
</select>,
<input type="color" class="input" id="color1" value="#32321A">,
<input type="color" class="input" id="color2" value="#F74C32">
<strong>);</strong>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
height: 100vh;
padding: 16px;
background-image: linear-gradient( to top, #32321A, #F74C32 );
background-size: cover;
background-repeat: no-repeat;
}
.box {
background-color: #fff;
padding: 16px;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var sel = document.querySelector('#select').selectedOptions[0].textContent;
var col1 = document.querySelector('#color1').value;
var col2 = document.querySelector('#color2').value;
document.querySelectorAll('body').forEach((n) => n.style.setProperty('background-image', 'linear-gradient(' + sel + ',' + col1 + ',' + col2 + ')'));
}));Обидва блоки мають однаковий градієнт поверх синього background-color — жодного другого зображення. Ліворуч типове normal: градієнт повністю перекриває колір. Праворуч multiply змішує градієнт із кольором, і синій проступає крізь нього. Білий текст в обох випадках лишається незмінним.
HTML
<div class="a">background-blend-mode: normal</div>
<div class="b">background-blend-mode: multiply</div>CSS
div {
float: left;
width: 45%;
height: 110px;
margin-right: 2%;
padding: 8px;
color: #fff;
font-weight: bold;
background-image: linear-gradient(135deg, #ffffff 0%, #888888 100%);
background-color: #1e6fd9;
}
.b {
background-blend-mode: multiply;
}HTML
<div class="tlo"><p>Тло</p></div>
<div class="img"><p>Картинка</p></div>
<div class="img blend-color"><p>background-blend-mode:color;</p></div>
<div class="img blend-multiply"><p>background-blend-mode:multiply;</p></div>
<div class="img blend-screen"><p>background-blend-mode:screen;</p></div>
<div class="img blend-overlay"><p>background-overlay-mode:color;</p></div>
<div class="img blend-darken"><p>background-blend-mode:darken;</p></div>
<div class="img blend-lighten"><p>background-blend-mode:lighten;</p></div>
<div class="img blend-color-dodge"><p>background-blend-mode:color-dodge;</p></div>
<div class="img blend-saturation"><p>background-blend-mode:saturation;</p></div>
<div class="img blend-luminosity"><p>background-blend-mode:luminosity;</p></div>CSS
div {
display: inline-block;
height: 250px;
width: 250px;
}
p {
margin-top:-40px;
text-align: center;
}
.tlo {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9);
}
.img {
margin-bottom: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
}
.blend-color {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: color;
}
.blend-multiply {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: multiply;
}
.blend-screen {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: screen;
}
.blend-overlay {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: overlay;
}
.blend-darken {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: darken;
}
.blend-lighten {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: lighten;
}
.blend-color-dodge {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: color-dodge;
}
.blend-saturation {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: saturation;
}
.blend-luminosity {
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-blend-mode: luminosity;
}Коментарі
Коментарів ще немає — будьте першим!