Režim masky - Triky CSS | Almanach CSS 2025

Vlastnosť mask-modeCSS označuje, či sa s obrázkom vrstvy masky CSS zaobchádza ako s alfa maskou alebo s maskou jasu.

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

Syntax

mask-mode: alpha | luminance | match-source

Vlastnosť prijíma jedno kľúčové slovo hodnotu, alebo čiarkami oddelený zoznam dvoch alebo všetky tri alpha, luminancea mask-sourcehodnoty.

Pôvodná hodnota: match-source
Vzťahuje sa na: všetky prvky. V SVG platí pre prvky kontajnera okrem prvku, všetky grafické prvky.
Zdedené: č
Vypočítaná hodnota: podľa zadania
Typ animácie: diskrétna

Hodnoty

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

alpha: určuje, že ako hodnoty masky by sa mali použiť alfa hodnoty (alfa kanál) obrazu vrstvy masky.
luminance: určuje, že hodnoty jasu obrazu masky by sa mali použiť ako hodnoty masky.
match-source: predvolená hodnota, ktorá nastavuje režim masky na alfa formát, ak je odkazom na masku mask-imagevlastnosti prvok CSS, napríklad adresa URL obrázka alebo prechod. Ak je však odkazom na masku mask-imagevlastnosti prvok SVG , musí sa použiť hodnota určená vlastnosťou typu masky odkazovaného prvku.
initial: použije predvolené nastavenie vlastnosti, ktoré je match-source.
inherit: preberá hodnotu režimu masky rodiča.
unset: odstráni aktuálny režim masky z prvku.

Použitie viacerých hodnôt

Táto vlastnosť môže mať pre režimy masky zoznam hodnôt oddelených čiarkami a každá hodnota sa použije na zodpovedajúci obrázok vrstvy masky uvedený vo vlastnosti mask-image.

V nasledujúcom príklade prvá hodnota určuje režim masky zodpovedajúci prvému obrázku, druhá hodnota pre druhý obrázok atď.

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

Alfa a jasové masky

Maskovanie v CSS prichádza s dvoma metódami, ktoré majú určité rozdiely vo výpočte hodnôt masky.

Alfa masky

Obrázky sú vytvorené z pixelov, pričom každý pixel obsahuje určité údaje obsahujúce hodnoty farieb a možno aj hodnoty alfa s informáciami o priehľadnosti. Obrázok s alfa kanálom môže byť alfa maska , napríklad obrázky PNG s čiernymi a priehľadnými oblasťami.

V jednoduchej operácii maskovania máme na vrchole umiestnený prvok a obrázok masky. Alfa hodnota každého pixelu v obraze masky bude zlúčená s jeho zodpovedajúcim pixelom v prvku.

Ak je hodnota alfa nula (tj. Priehľadná), vyhráva sa a táto časť prvku je maskovaná (tj. Skrytá).
Alfa hodnota jednej (tj. Úplne nepriehľadná) umožňuje, aby bol tento pixel prvku viditeľný.
Hodnota medzi 0 a 1 (napr. 0,5) umožňuje, aby bol pixel viditeľný, ale s určitou úrovňou priehľadnosti.

Takže v tejto metóde je hodnota masky v danom bode jednoducho hodnotou alfa kanála v danom bode obrazu masky a farebné kanály neprispievajú k hodnote masky.

Nasledujúci príklad je alfa maska, ktorá obsahuje iba čierne (alfa hodnota 1) a priehľadné oblasti (alfa hodnota 0) a môžete vidieť výsledok, ktorý má niektoré časti úplne viditeľné a iné úplne priehľadné:

Použitie PNG s alfa kanálom ako obrázka masky

Ale v nasledujúcom príklade používame gradient, ktorý má inú úroveň transparentnosti. Výsledok je nielen viditeľný alebo priehľadný, ale existujú aj niektoré priesvitné oblasti:

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

Výsledok vyzerá v prehliadači takto:

Použitie lineárneho gradientu ako obrázka masky

Jasové masky

V maske jasu sú dôležité farby a hodnoty alfa. Keď je hodnota alfa 0 (tj. Úplne priehľadná), prvok je skrytý; ak je hodnota alfa 1, hodnoty masky sa líšia v závislosti od farebného kanála daného pixelu. Napríklad keď je biela farba, prvok je viditeľný; v prípade čiernej oblasti je prvok skrytý.

Zatiaľ čo výpočet hodnôt masky v alfa maske je založený iba na alfa hodnotách obrazu masky, hodnoty masky jasovej masky sa počítajú z hodnôt jasu a alfa. Prehliadače to robia v nasledujúcich krokoch:

Vypočítajte hodnotu jasu z hodnôt farebného kanála.
Vynásobte vypočítanú hodnotu jasu zodpovedajúcou hodnotou alfa, čím získate hodnotu masky.

/ vysvetlenie Ak chcete získať viac informácií o týchto výpočtoch, môžete si pozrieť sekciu spracovania masiek v špecifikácii CSS Masking Module 1 z redakčnej redakcie zo septembra 2019.

Nižšie je obrázok masky s bielym slnkom v strede a priehľadnými oblasťami okolo. Ako vidíte, oblasti while sú úplne viditeľné: