Maskläge - CSS-tricks | CSS Almanack 2025

Den mask-modeCSS-egenskap anger om CSS maskskiktet bilden behandlas som en alfamask eller en luminans mask.

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

Syntax

mask-mode: alpha | luminance | match-source

Egenskapen accepterar ett nyckelordsvärde eller en kommaseparerad lista med två eller alla tre alpha, luminanceoch mask-sourcevärdena.

Ursprungligt värde: match-source
Gäller för: alla element. I SVG gäller det containerelement exklusive elementet, alla grafikelement.
Ärvt: nej
Beräknat värde: som specificerat
Animationstyp: diskret

Värden

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

alpha: anger att alfavärdena (alfakanalen) för masklagrets bild ska användas som maskvärden.
luminance: anger att luminansvärdena för maskbilden ska användas som maskvärden.
match-source: standardvärdet, som ställer in maskläget till alfa om mask-imageegenskapens maskreferens är ett CSS- element som en bild-URL eller en lutning. Om mask-imageegenskapens maskreferens är ett SVG- element, måste dock värdet som anges av det refererade elementets mask-typegenskap användas.
initial: tillämpar egenskapens standardinställning, vilket är match-source.
inherit: antar förälderns maskläge.
unset: tar bort det aktuella maskläget från elementet.

Använda flera värden

Den här egenskapen kan ta en kommaseparerad lista med värden för masklägen och varje värde tillämpas på en motsvarande masklagerbild som anges i maskbildegenskapen.

I följande exempel anger det första värdet maskläget som motsvarar den första bilden, det andra värdet för den andra bilden och så vidare.

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

Alfa- och luminansmasker

Maskering i CSS kommer med två metoder som har vissa skillnader i beräkningen av maskvärdena.

Alpha-masker

Bilderna är gjorda av pixlar, varje pixel har vissa data som innehåller färgvärden och kanske alfavärden med transparensinformation. En bild med en alfakanal kan vara en alfamask , som PNG-bilder med svarta och transparenta områden.

I en enkel maskeringsoperation har vi ett element och en maskbild placerad ovanpå den. Alfavärdet för varje pixel i maskbilden slås samman med dess motsvarande pixel i elementet.

Om alfavärdet är noll (dvs. transparent) vinner det ut och den delen av elementet maskeras (dvs dolt).
Ett alfavärde på ett (dvs. helt ogenomskinligt) gör att elementets pixel kan synas.
Ett värde mellan 0 och 1 (t.ex. 0,5) gör att pixeln kan synas men med en viss grad av transparens.

Så i denna metod är maskvärdet vid en given punkt helt enkelt värdet på alfakanalen vid den punkten i maskbilden och färgkanalerna bidrar inte till maskvärdet.

Exemplet nedan är en alfamask som bara innehåller svart (alfavärde 1) och transparenta områden (alfavärde 0) och du kan se resultatet som har vissa delar helt synliga och andra helt genomskinliga:

Använda en PNG med en alfakanal som maskbild

Men i följande exempel använder vi en lutning som har olika transparensnivå. Resultatet är inte bara synligt eller transparent, men det finns några genomskinliga områden:

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

Och här ser resultatet ut i webbläsaren:

Använda en linjär lutning som en maskbild

Luminansmasker

I en luminansmask har färger och alfavärden betydelse. När alfavärdet är 0 (dvs. helt transparent) döljs elementet; när alfa-värdet är 1 varierar maskvärdena beroende på färgkanalen för den pixeln. Till exempel, när färgen är vit, är elementet synligt; när det gäller svart område är elementet dolt.

Medan beräkning av maskvärdena i en alfamask endast baseras på alfavärdena för maskbilden beräknas maskvärdena för en luminansmaskt från luminans- och alfavärdena. Webbläsare gör detta i följande steg:

Beräkna ett luminansvärde från färgkanalvärdena.
Multiplicera det beräknade luminansvärdet med motsvarande alfavärde för att producera maskvärdet.

/ förklaring För mer information om dessa beräkningar kan du kolla in avsnittet om maskbehandling i CSS Masking Module 1-specifikationen från redaktörens utkast från september 2019.

Bellow är en maskbild med en vit sol i mitten och genomskinliga områden runt den. Som du kan se, medan områden är fullt synliga: