Фоновий режим змішування - CSS-хитрощі

В background-blend-modeвизначає властивість , яким чином елемента background-imageмає поєднуватися з його background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Перегляньте режим сумішності ручки пера від CSS-Tricks (@ css-tricks) на CodePen.

У наведеній вище демонстраційній демонстрації за замовчуванням background-imageліворуч не встановлений режим змішування, тому зображення перекриває background-color. Праворуч, однак, режим накладання змінив background-imageчервоний background-colorвнизу. Але зверніть увагу, що ця додаткова властивість не впливала на колір тексту.

Цінності

initial: значення за замовчуванням без змішування.
inherit: успадковує режим змішування батьківського елемента.
: значення, яке змінить фонове зображення залежно від кольору тла.

Значення може бути встановлено в будь-якому з наступних (в демосу нижче background-colorчервоний колір):

`luminosity`: світимість верхнього кольору зберігається при використанні насиченості та відтінку фонового кольору.

Демо

Ось робочий приклад того, як ці значення інтерпретуються залежно від background-color:

Перегляньте режим накладання ручки фону від CSS-Tricks (@ css-tricks) на CodePen.

Налаштування декількох режимів змішування

Кожен фоновий шар може мати лише один режим змішування, однак, якщо ми використовуємо, наприклад, кілька лінійних градієнтів, кожен із них може мати свій власний режим змішування, що робить цікавий показ:

Перегляньте «Градієнти пера» та режим суміші фону від CSS-Tricks (@ css-tricks) на CodePen.

Це досягається шляхом перерахування цих значень у порядку фонового шару, який ви хочете виконати:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Перший лінійний градієнт має screenрежим змішування, а потім другий лінійний градієнт, який має, differenceі перше фонове зображення, яке lightenзастосовано до нього.