Tryb mieszania tła - CSS-Tricks

W background-blend-modeobiekcie definiuje wpływ elementu background-imagepowinien zlewać ze swoim background-color:

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

Zobacz tryb mieszania tła pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.

W powyższym demo domyślny background-imagepo lewej nie ma ustawionego trybu mieszania, więc obraz nakłada się na background-color. Jednak po prawej stronie tryb mieszania zmodyfikował background-imagez czerwonym background-colorpod spodem. Należy jednak zauważyć, że ta dodatkowa właściwość nie wpływa na kolor tekstu.

Wartości

initial: wartość domyślna bez mieszania.
inherit: dziedziczy tryb mieszania elementu nadrzędnego.
: wartość, która zmieni obraz tła w zależności od jego koloru tła.

Wartości można ustawić jak dowolny z następujących (w demo poniżej na background-colorczerwono)

`luminosity`: jasność górnego koloru jest zachowywana przy użyciu nasycenia i odcienia koloru tła.

Próbny

Oto roboczy przykład interpretacji tych wartości w zależności od background-color:

Zobacz tryb mieszania tła pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Łączenie wielu trybów mieszania

Każda warstwa tła może mieć tylko jeden tryb mieszania, jednak jeśli używamy na przykład wielu liniowych gradientów, każdy z nich może mieć swój własny tryb mieszania, co zapewnia interesujący obraz:

Zobacz Gradienty pióra i tryb mieszania tła autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Można to osiągnąć, wymieniając te wartości w kolejności warstwy tła, którą chcesz zastosować:

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

Pierwszy gradient liniowy ma screentryb mieszania, po którym następuje drugi gradient liniowy, który ma, differencei pierwszy obraz tła, który został lightendo niego zastosowany.