Maske-modus - CSS-triks | CSS-almanakk 2025

Den mask-modeCSS egenskap indikerer om CSS maske laget bilde blir behandlet som en alfamaske eller en luminans maske.

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

Syntaks

mask-mode: alpha | luminance | match-source

Eiendommen godtar en søkeordverdi, eller en kommaadelt liste med to eller alle tre alpha, luminanceog mask-sourceverdiene.

Opprinnelig verdi: match-source
Gjelder for: alle elementer. I SVG gjelder det containerelementer unntatt elementet, alle grafikkelementer.
Arvet: nei
Beregnet verdi: som spesifisert
Animasjonstype: diskret

Verdier

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

alpha: angir at alfaverdiene (alfakanalen) til maskelagsbildet skal brukes som maskeverdiene.
luminance: spesifiserer at luminansverdiene til maskebildet skal brukes som maskeverdiene.
match-source: standardverdien, som setter maske-modus til alfa hvis maskehenvisningen til mask-imageegenskapen er et CSS- element som en URL-adresse eller en gradient. Imidlertid, hvis maskehenvisningen til mask-imageegenskapen er et SVG- element, må verdien som er spesifisert av det refererte elementets masketype-egenskap brukes.
initial: bruker egenskapens standardinnstilling, som er match-source.
inherit: vedtar foreldrenes maske-modus-verdi.
unset: fjerner gjeldende maske-modus fra elementet.

Bruke flere verdier

Denne egenskapen kan ta en komma-separert liste over verdier for maskemodus, og hver verdi blir brukt på et tilsvarende maskeringslag som er spesifisert i maskebildegenskapen.

I det følgende eksemplet spesifiserer den første verdien maskeringsmodus som tilsvarer det første bildet, den andre verdien for det andre bildet og så videre.

.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 kommer med to metoder som har noen forskjeller i beregningen av maskeverdiene.

Alpha masker

Bildene er laget av piksler, hver piksel har noen data som inneholder fargeverdier og kanskje alfaverdier med gjennomsiktighetsinformasjon. Et bilde med en alfakanal kan være en alfamaske , som PNG-bilder med svarte og gjennomsiktige områder.

I en enkel maskeringsoperasjon har vi et element og et maskebilde plassert på toppen av det. Alpha-verdien til hver piksel i maskebildet blir slått sammen med den tilsvarende pikslen i elementet.

Hvis alfa-verdien er null (dvs. gjennomsiktig), vinner den ut og den delen av elementet maskeres (dvs. skjult).
En alfa-verdi på en (dvs. fullstendig ugjennomsiktig) gjør at elementets piksel blir synlig.
En verdi mellom 0 og 1 (f.eks. 0,5) gjør at pikselet kan være synlig, men med en viss grad av gjennomsiktighet.

Så i denne metoden er maskeverdien på et gitt punkt ganske enkelt verdien av alfakanalen på det punktet i maskebildet, og fargekanalene bidrar ikke til maskeverdien.

Eksemplet nedenfor er en alfamaske som bare inneholder svarte (alfaverdi 1) og gjennomsiktige områder (alfaverdi 0), og du kan se resultatet som har noen deler fullt synlige og andre helt gjennomsiktige:

Bruke en PNG med en alfakanal som maskebilde

Men i det følgende eksemplet bruker vi en gradient som har forskjellig gjennomsiktighetsgrad. Resultatet er ikke bare synlig eller gjennomsiktig, men det er noen gjennomsiktige områder:

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

Slik ser resultatet ut i nettleseren:

Bruke en lineær gradient som et maskebilde

Luminansmasker

I en luminansmaske har farger og alfaverdier betydning. Når alfa-verdien er 0 (dvs. helt gjennomsiktig), skjules elementet; når alfa-verdien er 1, varierer maskeverdiene avhengig av fargekanalen til den pikselet. For eksempel, når fargen er hvit, er elementet synlig; når det gjelder svart område, er elementet skjult.

Mens beregning av maskeverdiene i en alfamaske bare er basert på alfaverdiene til maskebildet, blir maskeverdiene til en luminansmaske beregnet ut fra luminans- og alfaverdiene. Nettlesere gjør dette i følgende trinn:

Beregn en luminansverdi fra fargekanalverdiene.
Multipliser den beregnede luminansverdien med den tilsvarende alfaverdien for å produsere maskeverdien.

/ forklaring For mer informasjon om disse beregningene, kan du sjekke ut maskebehandlingsseksjonen i CSS Masking Module 1-spesifikasjonen fra september 2019 Editor's Draft.

Bellow er et maskebilde med en hvit sol i midten og gjennomsiktige områder rundt den. Som du kan se, mens områdene er fullt synlige: