Tryb mieszania - CSS-Tricks | Almanach CSS 2025

mix-blend-modeWłaściwość określa, jak zawartość elementu powinna łączyć się z tłem. Na przykład tekst pliku

może wtapiać się w tło za nim w interesujący sposób.

.blend ( mix-blend-mode: exclusion; )

W powyższym przykładzie treść została zmodyfikowana przez program, mix-blend-modetak że kolory tekstu zostały wyłączone z tła. To tylko jedna z wielu wartości tej właściwości.

W Chrome 58+ występuje problem polegający na tym, mix-blend-modeże nie renderuje się na elementach ustawionych na przezroczystość . Został zgłoszony jako numer 711955 w przeglądarce Chrome, przypisany w momencie pisania tego tekstu. W międzyczasie prostą poprawką jest przypisanie białego (lub naprawdę dowolnego) koloru tła do elementu body.

Wartości

initial: domyślne ustawienie właściwości, które nie ustawia trybu mieszania.
inherit: element odziedziczy tryb mieszania z elementu nadrzędnego.
unset: usuwa bieżący tryb mieszania z elementu.
: to jest atrybut jednego z poniższych trybów mieszania:
normal: ten atrybut nie stosuje żadnego mieszania.
multiply: element jest mnożony przez tło i zastępuje kolor tła. Wynikowy kolor jest zawsze tak ciemny jak tło.
screen: mnoży tło, a następnie treść uzupełnia wynik. Spowoduje to, że zawartość będzie jaśniejsza niż background-color.
nakładka: mnoży lub ekranuje zawartość w zależności od koloru tła. Jest to odwrotność trybu mieszania ostrego światła.
ciemniej: tło jest zastępowane treścią, w której treść jest ciemniejsza, w przeciwnym razie pozostaje bez zmian.
lighten: tło jest zastępowane treścią, w której treść jest jaśniejsza.
color-dodge: ten atrybut rozjaśnia kolor tła, aby odzwierciedlić kolor treści.
color-burn: powoduje to przyciemnienie tła, aby odzwierciedlić naturalny kolor zawartości.
hard-light: w zależności od koloru treści ten atrybut będzie wyświetlał lub pomnożył go.
soft-light: w zależności od koloru treści spowoduje to jej przyciemnienie lub rozjaśnienie.
difference: to odejmuje ciemniejszy z dwóch kolorów od najjaśniejszego koloru.
exclusion: podobny do, differenceale z mniejszym kontrastem.
hue: tworzy kolor z odcieniem treści w połączeniu z nasyceniem i jasnością tła.
saturation: tworzy kolor z nasyceniem treści w połączeniu z odcieniem i jasnością tła.
color: tworzy kolor z odcieniem i nasyceniem treści oraz jasnością tła.
luminosity: tworzy kolor z jasnością treści oraz odcieniem i nasyceniem tła. To jest odwrotność coloratrybutu.

Warto zauważyć, że ustawienie innego trybu mieszania niż normalspowoduje wygenerowanie nowego kontekstu stosowego, który następnie należy zmieszać z kontekstem stosowym zawierającym element.

Efekt tych wartości pokazano na poniższym demo:

Więcej informacji

Podstawy trybów mieszania CSS
tryb mix-blend na MDN
tryb mieszania mieszania na W3C
Zbiór demonstracji trybu mieszania CSS
Poznanie trybów mieszania CSS

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.