Maske-tilstand - CSS-tricks | CSS Almanak 2025

Den mask-modeCSS egenskab angiver, om CSS maske lag billedet behandles som en alpha maske eller en luminans maske.

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

Syntaks

mask-mode: alpha | luminance | match-source

Den ejendom accepterer et søgeord værdi, eller en kommasepareret liste med to eller alle tre af alpha, luminanceog mask-sourceværdier.

Startværdi: match-source
Gælder for: alle elementer. I SVG gælder det for containerelementer eksklusive elementet, alle grafiske elementer.
Arvet: nej
Beregnet værdi: som specificeret
Animationstype: diskret

Værdier

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

alpha: specificerer, at alfaværdierne (alfakanalen) for maske lagbilledet skal bruges som maskeværdier.
luminance: specificerer, at luminansværdierne for maskebilledet skal bruges som maskeværdier.
match-source: standardværdien, der indstiller masktilstanden til alfa, hvis mask-imageejendomsmaskehenvisningen er et CSS- element som en billed-URL eller en gradient. Men hvis maskereferencen for et mask-imageegenskab er et SVG- element, skal den værdi, der er angivet af det refererede element, bruge en masketypeegenskab.
initial: anvender egenskabens standardindstilling, som er match-source.
inherit: vedtager forældrenes maskemodusværdi.
unset: fjerner den aktuelle maske-tilstand fra elementet.

Brug af flere værdier

Denne egenskab kan tage en komma-adskilt liste over værdier for maskefunktioner, og hver værdi anvendes på et tilsvarende maskerlagsbillede, der er specificeret i maskebilledegenskaben.

I det følgende eksempel specificerer den første værdi den maskeringstilstand, der svarer til det første billede, den anden værdi for det andet billede osv.

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

Alfa- og luminansmasker

Maskering i CSS leveres med to metoder, der har nogle forskelle i beregningen af maskeværdierne.

Alpha masker

Billeder er lavet af pixels, hver pixel har nogle data, der indeholder farveværdier og måske alfaværdier med gennemsigtighedsinformation. Et billede med en alfakanal kan være en alfamaske , ligesom PNG-billeder med sorte og gennemsigtige områder.

I en simpel maskeringsoperation har vi et element og et maskebillede placeret oven på det. Alpha-værdien for hver pixel i maskebilledet flettes med den tilsvarende pixel i elementet.

Hvis alfaværdien er nul (dvs. gennemsigtig), vinder den ud, og den del af elementet maskeres (dvs. skjult).
En alfa-værdi på en (dvs. fuldstændig uigennemsigtig) gør det muligt for elementets pixel at være synlig.
En værdi mellem 0 og 1 (f.eks. 0,5) gør det muligt for pixlen at være synlig, men med en vis grad af gennemsigtighed.

Så i denne metode er maskeværdien ved et givet punkt simpelthen værdien af alfakanalen på det punkt i maskebilledet, og farvekanalerne bidrager ikke til maskeværdien.

Eksemplet nedenfor er en alfamaske, der kun indeholder sorte (alfaværdi 1) og gennemsigtige områder (alfaværdi 0), og du kan se resultatet, der har nogle dele fuldt synlige og andre fuldt gennemsigtige:

Brug af en PNG med en alfakanal som et maskebillede

Men i det følgende eksempel bruger vi en gradient, der har et andet niveau af gennemsigtighed. Resultatet er ikke kun synligt eller gennemsigtigt, men der er nogle gennemskinnelige områder:

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

Og her ser resultatet ud i browseren:

Brug af en lineær gradient som et maskebillede

Luminansmasker

I en luminansmaske betyder farver og alfaværdier noget. Når alfa-værdien er 0 (dvs. fuldstændig gennemsigtig), skjules elementet; når alfa-værdien er 1, varierer maskeværdierne afhængigt af pixelens farvekanal. For eksempel, når farven er hvid, er elementet synligt; i tilfælde af sort område er elementet skjult.

Mens beregning af maskeværdierne i en alfamaske kun er baseret på alfaværdierne for maskebilledet , beregnes maskeværdierne for en luminansmaske ud fra luminans- og alfaværdierne. Browsere gør dette i følgende trin:

Beregn en luminansværdi ud fra farvekanalværdierne.
Multiplicer den beregnede luminansværdi med den tilsvarende alfaværdi for at producere maskeværdien.

/ forklaring For mere information om disse beregninger kan du tjekke afsnittet om behandling af masker i CSS Masking Module 1-specifikationen fra redaktørens udkast til september 2019.

Bellow er et maskebillede med en hvid sol i midten og gennemsigtige områder omkring det. Som du kan se, mens områderne er fuldt synlige:

Brug af et PNG-billede med en alfakanal og hvide områder som et maskebillede

Og i det næste eksempel bruges en farverig gradient som et maskebillede, og du kan se effekten af forskellige farver på maskeværdierne i luminanstilstand: