Masker-modus - CSS-trucs | CSS Almanac 2025

De mask-modeCSS-eigenschap geeft aan of de afbeelding van de CSS-maskerlaag wordt behandeld als een alfamasker of als een luminantiemasker.

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

Syntaxis

mask-mode: alpha | luminance | match-source

De eigenschap accepteert één trefwoordwaarde of een door komma's gescheiden lijst van twee of alle drie de waarden alpha, luminanceen mask-source.

Beginwaarde: match-source
Geldt voor: alle elementen. In SVG is het van toepassing op containerelementen met uitzondering van het element, alle grafische elementen.
Overgenomen: nee
Berekende waarde: zoals gespecificeerd
Animatietype: discreet

Waarden

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

alpha
luminance
match-source Als de maskerverwijzing van de eigenschap echter een SVG- element is, moet de waarde worden gebruikt die is opgegeven door de eigenschap maskertype van het element waarnaar wordt verwezen .mask-imagemask-image
initialmatch-source
inherit
unset

Meerdere waarden gebruiken

Deze eigenschap kan een door komma's gescheiden lijst met waarden aannemen voor maskermodi en elke waarde wordt toegepast op een corresponderende maskerlaagafbeelding die is gespecificeerd in de eigenschap mask-image.

In het volgende voorbeeld specificeert de eerste waarde de maskermodus die overeenkomt met de eerste afbeelding, de tweede waarde voor de tweede afbeelding, enzovoort.

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

Alfa- en luminantiemaskers

Bij maskering in CSS zijn er twee methoden die enkele verschillen hebben bij het berekenen van de maskerwaarden.

Alpha maskers

Afbeeldingen zijn gemaakt van pixels, elke pixel heeft enkele gegevens met kleurwaarden en misschien alfawaarden met transparantiegegevens. Een afbeelding met een alfakanaal kan een alfamasker zijn , zoals PNG-afbeeldingen met zwarte en transparante gebieden.

Bij een eenvoudige maskeerbewerking hebben we er een element en een maskerafbeelding bovenop geplaatst. De alpha-waarde van elke pixel in de maskerafbeelding wordt samengevoegd met de bijbehorende pixel in het element.

Als de alfawaarde nul is (dwz transparant), wint hij en wordt dat deel van het element gemaskeerd (dwz verborgen).
Een alfa-waarde van één (dwz volledig ondoorzichtig) zorgt ervoor dat die pixel van het element zichtbaar is.
Een waarde tussen 0 en 1 (bijv. 0,5) zorgt ervoor dat de pixel zichtbaar is maar met een zekere mate van transparantie.

In deze methode is de maskerwaarde op een bepaald punt dus gewoon de waarde van het alfakanaal op dat punt van het maskerbeeld en dragen de kleurkanalen niet bij aan de maskerwaarde.

De voorbeeldbalg is een alpha-masker dat alleen zwarte (alpha-waarde van 1) en transparante gebieden (alpha-waarde van 0) bevat en u kunt het resultaat zien dat sommige delen volledig zichtbaar zijn en andere volledig transparant:

Een PNG met een alfakanaal gebruiken als een maskerafbeelding

Maar in het volgende voorbeeld gebruiken we een verloop met een ander transparantieniveau. Het resultaat is niet alleen zichtbaar of transparant, maar er zijn ook enkele doorschijnende gebieden:

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

En hier is hoe het resultaat eruit ziet in de browser:

Een lineair verloop gebruiken als maskerafbeelding

Luminantie maskers

In een luminantiemasker zijn kleuren en alfawaarden van belang. Als de alpha-waarde 0 is (dwz volledig transparant), is het element verborgen; wanneer de alfawaarde 1 is, variëren de maskerwaarden afhankelijk van het kleurkanaal van die pixel. Als de kleur bijvoorbeeld wit is, is het element zichtbaar; in het geval van een zwart gebied is het element verborgen.

Terwijl het berekenen van de maskerwaarden in een alfa-masker alleen gebaseerd is op de alfa-waarden van het maskerbeeld, worden de maskerwaarden van een luminantiemasker berekend op basis van de luminantie en de alfa-waarden. Browsers doen dit in de volgende stappen:

Bereken een luminantiewaarde uit de kleurkanaalwaarden.
Vermenigvuldig de berekende luminantiewaarde met de overeenkomstige alfawaarde om de maskerwaarde te verkrijgen.

/ toelichting Voor meer informatie over deze berekeningen kunt u de sectie maskerverwerking in de CSS Masking Module 1-specificatie van de Editor's Draft van september 2019 bekijken.

Bellow is een maskerbeeld met een witte zon in het midden en transparante gebieden eromheen. Zoals u kunt zien, zijn de while-gebieden volledig zichtbaar:

Een PNG-afbeelding met een alfakanaal en witte gebieden gebruiken als een maskerafbeelding

En in het volgende voorbeeld wordt een kleurrijk verloop gebruikt als een maskerafbeelding en kun je het effect van verschillende kleuren op de maskerwaarden in de luminantiemodus zien: