Način mešanja ozadja - CSS-triki

Na background-blend-modelastnine opredeljuje, kako an je element background-imagemora mešanica s svojimi background-color:

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

Oglejte si način mešanja v ozadju pisala CSS-Tricks (@ css-tricks) na CodePen.

V zgornji predstavitvi privzeto background-imagena levi ni nastavljen način mešanja, zato slika prekriva background-color. Na desni pa je način mešanja spremenil background-imagerdečo background-colorspodaj. Vendar upoštevajte, da ta dodatna lastnost ni vplivala na barvo besedila.

Vrednote

initial: privzeta vrednost brez mešanja.
inherit: podeduje način mešanja nadrejenega elementa.
: vrednost, ki bo spremenila sliko ozadja glede na barvo ozadja.

Vrednost se lahko določi kot katero koli od naslednjih (v demo pod njo background-colorrdeče):

`luminosity`: svetilnost zgornje barve se ohrani ob uporabi nasičenosti in odtenka barve ozadja.

Demo

Tu je delovni primer, kako se te vrednosti razlagajo glede na background-color:

Oglejte si način mešanja pisave za ozadje s strani CSS-Tricks (@ css-tricks) na CodePen.

Povezovanje več načinov mešanja

Vsak sloj ozadja ima lahko samo en način mešanja, če pa na primer uporabljamo več linearnih prelivov, ima lahko vsak svoj način mešanja, kar naredi zanimiv prikaz:

Oglejte si Prelivi pisala in način mešanja v ozadju, ki ga izvaja CSS-Tricks (@ css-triki) na CodePenu.

To dosežemo z navedbo teh vrednosti po vrstnem redu sloja v ozadju, ki ga želite uporabiti:

.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; )

Prvi linearni gradient ima screennačin mešanja, nato pa drugi linearni gradient, ki ima, differencein prvo sliko v ozadju, ki je bila lightenuporabljena zanj.