Maskeren in CSS is een manier om delen van het element te verbergen en andere weer te geven. Een andere is clip-path, maar laten we ons daar vandaag niet op concentreren. “Maskers zijn afbeeldingen; Clips zijn paden ”is een manier om over het verschil na te denken, hoewel het zeker verwarrend wordt.
In deze video zullen we bekijken hoe vergelijkbaar masken de mask-*eigenschappen ervan echt vergelijkbaar zijn met de backgrounden background-*eigenschappen. En ze kunnen mooi samen worden gebruikt, omdat een masker een manier is om sommige delen van een afbeelding te verbergen, maar toch de inhoud en achtergrond van de andere delen te onthullen.
SVG is geweldig voor maskers, omdat ze door de vector-aard mooi kunnen worden geschaald en de over het algemeen kleine bestandsgrootte leuk is. Een van de verwarrende aspecten van maskers is de mask-type. De alphawaarde betekent dat de transparante delen van de afbeelding de transparante delen van het masker worden (wat soms meer verbijsterend is dan je zou hopen). Een luminancewaarde betekent dat wit ondoorzichtig is en zwart transparant en grijs daartussenin. Of is het andersom? En hoe zit het met maskers die al een alfakanaal hebben? En worden de gebieden in een SVG-bestand waarin niets staat als alfatransparant beschouwd? Waarschijnlijk? Laten we spelen.