Maskering i CSS är ett sätt att dölja delar av elementet och visa andra. En annan är clip-path, men låt oss inte fokusera på det idag. ”Masker är bilder; Klipp är vägar ”är ett sätt att tänka på skillnaden, även om det verkligen blir förvirrande.
I den här videon kommer vi att titta på hur lika maskoch dess mask-*egenskaper är verkligen liknar backgroundoch background-*egenskaper. Och de kan användas snyggt tillsammans, eftersom en mask är ett sätt att dölja vissa delar av en bild men ändå avslöja innehållet och bakgrunden till de andra delarna.
SVG är utmärkt för masker, eftersom vektornaturen tillåter dem att skalas snyggt och den generellt lilla filstorleken är fin. En av de förvirrande bitarna runt masker är mask-type. De alphavärde innebär att den transparenta delar av bilden blir de genomskinliga delarna av masken (som ibland mer kluriga än du hoppas). Ett luminancevärde betyder att vitt är ogenomskinligt och svart är transparent och grå är däremellan. Eller är det tvärtom? Och hur är det med masker som redan har en alfakanal? Och anses områdena i en SVG-fil med ingenting i dem alfa-genomskinliga? Förmodligen? Låt oss spela.