Właściwość CSS mix-blend-mode

Definicja stylu, przeznaczenie i użycie mix-blend-mode

Styl mix-blend-mode definiuje, w jaki sposób zawartość elementu powinna mieszać się z jego bezpośrednim tłem nadrzędnym (rodzicem).

Wartości właściwości mix-blend-mode

Wartość	Opis
normal	Ustala normalny tryb mieszania. Ustawienie domyślne.
multiply	Ustawia tryb mieszania na mnożenie.
screen	Ustala tryb mieszania na raster.
overlay	Ustala tryb mieszania na nakładkę.
darken	Ustala tryb mieszania na ciemniejszy.
lighten	Ustala tryb mieszania na jaśniejszy.
color-dodge	Finalnym kolorem będzie rozjaśniony kolor dolny. Ponadto kolor górny czarny zostaje zamieniony niezmienionym kolorem dolnym.
color-burn	Finalnym kolorem będzie przyciemniony kolor dolny. Ponadto kolor górny biały zostaje zamieniony niezmienionym kolorem dolnym.
difference	Ustala tryb mieszania na różnicę.
exclusion	Ustala tryb mieszania na wykluczenie.
hue	Ustala tryb mieszania na odcień.
saturation	Ustala tryb mieszania na nasycenie.
color	Ustala tryb mieszania na kolor.
luminosity	Ustala tryb mieszania na jasność.

Składnia CSS mix-blend-mode

Wsparcie przeglądarek dla właściwości mix-blend-mode

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość
mix-blend-mode	41.0	79.0	32.0	8.0	35.0

Przykładowe zastosowania właściwości mix-blend-mode

Przykład 1: kontener z czerwonym tłem i obrazem, który łączy się z czerwonym kontenerem (przyciemniony): .container { background-color: red; } .container img { mix-blend-mode: darken; } Przykład 2: prezentacja wszystkich wartości: .normal {mix-blend-mode: normal;} .multiply {mix-blend-mode: multiply;} .screen {mix-blend-mode: screen;} .overlay {mix-blend-mode: overlay;} .darken {mix-blend-mode: darken;} .lighten {mix-blend-mode: lighten;} .color-dodge {mix-blend-mode: color-dodge;} .color-burn {mix-blend-mode: color-burn;} .difference {mix-blend-mode: difference;} .exclusion {mix-blend-mode: exclusion;} .hue {mix-blend-mode: hue;} .saturation {mix-blend-mode: saturation;} .color {mix-blend-mode: color;} .luminosity {mix-blend-mode: luminosity;} Przykład 3: użycie mix-blend-mode do tworzenia responsywnego wyciętego tekstu na tle obrazu (ten przykład nie działa w przeglądarce Internet Explorer ani Edge): .image-container { background-image: url("paris.jpg"); background-size: cover; position: relative; height: 300px; } .text { background-color: white; color: black; font-size: 10vw; font-weight: bold; margin: 0 auto; padding: 10px; width: 50%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; }