Maskering i CSS er en måde at skjule dele af elementet og vise andre. En anden er clip-path, men lad os ikke fokusere på det i dag. ”Masker er billeder; Klip er stier ”er en måde at tænke på forskellen på, selvom det helt sikkert bliver forvirrende.
I denne video, vil vi se på, hvordan lignende maskog dets mask-*egenskaber er virkelig ligner den backgroundog background-*egenskaber. Og de kan bruges pænt sammen, fordi en maske er en måde at skjule nogle dele af et billede på, men stadig afsløre indholdet og baggrunden for de andre dele.
SVG er fantastisk til masker, da vektornaturen tillader dem at skalere pænt, og den generelt lille filstørrelse er god. En af de forvirrende bits omkring masker er mask-type. De alphaværdi betyder, at de transparente dele af billedet bliver de gennemsigtige dele af masken (som er undertiden mere hjernevridende end du håber). En luminanceværdi betyder, at hvid er uigennemsigtig, og sort er gennemsigtig, og grå er imellem. Eller er det omvendt? Og hvad med masker, der allerede har en alfakanal? Og betragtes områderne i en SVG-fil med intet i alfa-gennemsigtige? Sandsynligvis? Lad os spille.