Režim masky - Triky CSS | Almanach CSS 2025

Vlastnost mask-modeCSS označuje, zda se s obrazem vrstvy masky CSS zachází jako s alfa maskou nebo s maskou jasu.

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

Syntax

mask-mode: alpha | luminance | match-source

Vlastnost přijímá jedno klíčové slovo hodnotu, nebo čárkami oddělený seznam dvou nebo všechny tři alpha, luminancea mask-sourcehodnoty.

Počáteční hodnota: match-source
Platí pro: všechny prvky. V SVG platí pro prvky kontejneru s výjimkou prvku, všechny grafické prvky.
Zděděno: ne
Vypočítaná hodnota: jak je uvedeno
Typ animace: diskrétní

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 jako hodnoty masky by měly být použity hodnoty alfa (alfa kanál) obrazu vrstvy masky.
luminance: určuje, že hodnoty jasu obrazu masky by měly být použity jako hodnoty masky.
match-source: výchozí hodnota, která nastavuje režim masky na alfa, pokud je odkazem na masku mask-imagevlastnosti prvek CSS, jako je adresa URL obrázku nebo přechod. Pokud je však odkazem na masku mask-imagevlastnosti prvek SVG , musí být použita hodnota určená vlastností typu masky odkazovaného prvku.
initial: použije výchozí nastavení vlastnosti, což je match-source.
inherit: převezme hodnotu režimu masky nadřazeného objektu.
unset: odstraní aktuální režim masky z prvku.

Použití více hodnot

Tato vlastnost může převzít seznam hodnot oddělených čárkami pro režimy masky a každá hodnota se použije na odpovídající obrázek vrstvy masky určený ve vlastnosti mask-image.

V následujícím příkladu první hodnota určuje režim masky odpovídající prvnímu obrázku, druhá hodnota pro druhý obrázek atd.

.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

Maskování v CSS přichází se dvěma metodami, které mají určité rozdíly ve výpočtu hodnot masky.

Alfa masky

Obrázky jsou tvořeny pixely, každý pixel má některá data obsahující hodnoty barev a možná hodnoty alfa s informacemi o průhlednosti. Obrázek s alfa kanálem může být alfa maska , například obrázky PNG s černými a průhlednými oblastmi.

V jednoduché maskovací operaci máme prvek a obrázek masky umístěný nad ním. Hodnota alfa každého pixelu v obrázku masky bude sloučena s odpovídajícím pixelem v prvku.

Pokud je hodnota alfa nula (tj. Průhledná), vyhraje se a tato část prvku je maskovaná (tj. Skrytá).
Alfa hodnota jedné (tj. Zcela neprůhledná) umožňuje, aby byl viditelný tento pixel prvku.
Hodnota mezi 0 a 1 (např. 0,5) umožňuje, aby byl pixel viditelný, ale s určitou úrovní průhlednosti.

V této metodě je tedy hodnota masky v daném bodě jednoduše hodnotou alfa kanálu v tomto bodě obrazu masky a barevné kanály nepřispívají k hodnotě masky.

Níže uvedený příklad je alfa maska, která obsahuje pouze černé (alfa hodnota 1) a průhledné oblasti (alfa hodnota 0) a můžete vidět výsledek, který má některé části plně viditelné a jiné plně průhledné:

Použití PNG s alfa kanálem jako obrázek masky

Ale v následujícím příkladu používáme přechod, který má jinou úroveň průhlednosti. Výsledek je nejen viditelný nebo průhledný, ale existují i některé průsvitné oblasti:

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

Výsledek vypadá v prohlížeči takto:

Použití lineárního přechodu jako obrazu masky

Jasové masky

V masce jasu záleží na barvách a hodnotách alfa. Když je alfa hodnota 0 (tj. Plně transparentní), prvek je skrytý; pokud je alfa hodnota 1, hodnoty masky se liší v závislosti na barevném kanálu daného pixelu. Když je například bílá barva, prvek je viditelný; v případě černé oblasti je prvek skrytý.

Zatímco výpočet hodnot masky v alfa masce je založen pouze na hodnotách alfa obrazu masky, hodnoty masky jasové masky se počítají z hodnot jasu a alfa. Prohlížeče to provedou v následujících krocích: