Режим на смесване на фона - 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.

Свързване на множество режими на смесване

Всеки фонов слой може да има само един режим на смесване, но ако използваме например множество линейни градиенти, всеки от тях може да има свой собствен режим на смесване, което прави интересен дисплей:

Вижте Pen Gradients и background-blend-mode от 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приложено към него.