Maskering i CSS er en måte å skjule deler av elementet og vise andre. En annen er clip-path, men la oss ikke fokusere på det i dag. “Masker er bilder; Klipp er stier ”er en måte å tenke på forskjellen, selv om den absolutt blir forvirrende.
I denne videoen vil vi se på hvor like maskog dens mask-*egenskaper virkelig ligner på backgroundog background-*egenskaper. Og de kan brukes pent sammen, men en maske er en måte å skjule noen deler av et bilde på, men fremdeles avsløre innholdet og bakgrunnen til de andre delene.
SVG er flott for masker, da vektornaturen lar dem skalere pent og den generelt lille filstørrelsen er fin. En av de forvirrende bitene rundt masker er mask-type. De alphaverdi betyr at de gjennomsiktige delene av bildet blir de gjennomsiktige delene av masken (som er noen ganger mer psykologisk enn du håper). En luminanceverdi betyr at hvitt er ugjennomsiktig og svart er gjennomsiktig og grått er i mellom. Eller er det omvendt? Og hva med masker som allerede har en alfakanal? Og blir områdene i en SVG-fil uten noe i dem betraktet som alfa-gjennomsiktige? Sannsynligvis? La oss spille.