Background-blend-mode - CSS-trükkök

A background-blend-modetulajdonság meghatározza, hogy az elemnek miként background-imagekell keverednie a következőkkel background-color:

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

Lásd a CSS-Tricks (@ css-tricks) Toll háttér-keverék módját a CodePen-en.

A fenti bemutatóban background-imagea bal oldali alapértelmezettnél nincs beállítva a keverési mód, így a kép átfedi a background-color. A jobb oldalon a keverési mód módosította background-imagea pirosat background-coloralatta. De vegye figyelembe, hogy ez a további tulajdonság nem befolyásolta a szöveg színét.

Értékek

initial: az alapértelmezett érték keverés nélkül.
inherit: örökli a szülő elem keverési módját.
: olyan érték, amely megváltoztatja a háttérképet a háttérszínétől függően.

Az érték a következők egyikeként állítható be (az alábbi demókban a background-colorpiros látható):

`luminosity`: a felső szín világossága megmarad, miközben a háttérszín telítettségét és árnyalatát használja.

Demó

Íme egy működő példa arra, hogyan értelmezik ezeket az értékeket a következőktől függően background-color:

Lásd a CSS-Tricks (@ css-tricks) tollal történő keverési módját a CodePen-en.

Többféle keverési mód láncolása

Minden háttérrétegnek csak egyetlen keverési módja lehet, azonban ha például több lineáris színátmenetet használunk, mindegyiknek megvan a saját keverési módja, ami érdekes megjelenítést eredményez:

Tekintse meg a CSS-Tricks (@ css-tricks) Tollszínátmenetek és háttér-keverési módját a CodePen-en.

Ezt úgy érjük el, hogy ezeket az értékeket a kívánt háttérréteg sorrendjében soroljuk fel:

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

Az első lineáris gradiens screenkeverési móddal rendelkezik, majd a második lineáris gradiens, amely rendelkezik, differenceés az első háttérkép, amely lightenrá vonatkozik.