Tryb maski - CSS-Tricks | Almanach CSS 2025

Właściwość mask-modeCSS wskazuje, czy obraz warstwy maski CSS jest traktowany jako maska alfa czy maska luminancji.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Składnia

mask-mode: alpha | luminance | match-source

Obiekt przyjmuje jednego słowa kluczowego, lub listę oddzielonych dwóch lub wszystkich trzech alpha, luminancei mask-sourcewartości.

Wartość początkowa: match-source
Dotyczy: wszystkich elementów. W SVG dotyczy to elementów kontenera z wyłączeniem elementu, wszystkich elementów graficznych.
Odziedziczone: nie
Wartość obliczona: jak określono
Typ animacji: dyskretna

Wartości

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: określa, że wartości alfa (kanał alfa) obrazu warstwy maskującej powinny być używane jako wartości maski.
luminance: określa, że wartości luminancji obrazu maski powinny być używane jako wartości maski.
match-source: wartość domyślna, która ustawia tryb maski na alfa, jeśli odwołanie do maski mask-imagewłaściwości jest elementem CSS , takim jak adres URL obrazu lub gradient. Jeśli jednak odwołanie do maski mask-imagewłaściwości jest elementem SVG , należy użyć wartości określonej przez właściwość mask-type elementu, do którego się odwołuje .
initial: stosuje domyślne ustawienie właściwości, czyli match-source.
inherit: przyjmuje wartość trybu maski rodzica.
unset: usuwa aktualny tryb maski z elementu.

Używanie wielu wartości

Ta właściwość może przyjmować listę wartości oddzielonych przecinkami dla trybów maski, a każda wartość jest stosowana do odpowiedniego obrazu warstwy maski określonego we właściwości mask-image.

W poniższym przykładzie pierwsza wartość określa tryb maski odpowiadający pierwszemu obrazowi, druga wartość dla drugiego obrazu i tak dalej.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Maski alfa i luminancji

Maskowanie w CSS obejmuje dwie metody, które mają pewne różnice w obliczaniu wartości maski.

Maski alfa

Obrazy składają się z pikseli, każdy piksel ma pewne dane zawierające wartości kolorów i być może wartości alfa z informacjami o przezroczystości. Obraz z kanałem alfa może być maską alfa , podobnie jak obrazy PNG z czarnymi i przezroczystymi obszarami.

W prostej operacji maskowania mamy umieszczony na nim element i obraz maski. Wartość alfa każdego piksela w obrazie maski zostanie połączona z odpowiadającym mu pikselem w elemencie.

Jeśli wartość alfa wynosi zero (tj. Jest przezroczysta), wygrywa i ta część elementu jest maskowana (tj. Ukryta).
Wartość alfa wynosząca jeden (tj. Całkowicie nieprzezroczysta) sprawia, że piksel elementu jest widoczny.
Wartość pomiędzy 0 a 1 (np. 0,5) umożliwia pikselowi bycie widocznym, ale z pewnym poziomem przezroczystości.

Zatem w tej metodzie wartość maski w danym punkcie jest po prostu wartością kanału alfa w tym punkcie obrazu maski, a kanały kolorów nie wpływają na wartość maski.

Poniższy przykład to maska alfa, która zawiera tylko czarne (wartość alfa 1) i przezroczyste obszary (wartość alfa 0) i możesz zobaczyć wynik, w którym niektóre części są w pełni widoczne, a inne w pełni przezroczyste:

Wykorzystanie PNG z kanałem alfa jako obrazu maski

Ale w poniższym przykładzie używamy gradientu, który ma inny poziom przezroczystości. Rezultat jest nie tylko widoczny lub przezroczysty, ale są też półprzezroczyste obszary:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

A oto jak wygląda wynik w przeglądarce:

Używanie gradientu liniowego jako obrazu maski

Maski luminancji

W masce luminancji znaczenie mają kolory i wartości alfa. Gdy wartość alfa wynosi 0 (tzn. Jest całkowicie przezroczysta), element jest ukryty; gdy wartość alfa wynosi 1, wartości maski różnią się w zależności od kanału koloru tego piksela. Na przykład, gdy kolor jest biały, element jest widoczny; w przypadku czarnego obszaru element jest ukryty.

Podczas gdy obliczanie wartości maski w masce alfa opiera się tylko na wartościach alfa obrazu maski, wartości maski luminancji są obliczane na podstawie luminancji i wartości alfa. Przeglądarki robią to w następujących krokach:

Oblicz wartość luminancji z wartości kanału koloru.
Pomnóż obliczoną wartość luminancji przez odpowiednią wartość alfa, aby uzyskać wartość maski.

/ wyjaśnienie Aby uzyskać więcej informacji na temat tych obliczeń, zapoznaj się z sekcją dotyczącą przetwarzania maski w specyfikacji modułu maskowania CSS 1 z wersji roboczej redakcji z września 2019 r.

Poniżej znajduje się obraz maski z białym słońcem pośrodku i przezroczystymi obszarami wokół niego. Jak widać, obszary while są w pełni widoczne:

Użycie obrazu PNG z kanałem alfa i białymi obszarami jako obrazu maskującego

W następnym przykładzie kolorowy gradient jest używany jako obraz maski i możesz zobaczyć wpływ różnych kolorów na wartości maski w trybie luminancji: