Il mascheramento in CSS è un modo per nascondere parti dell'elemento e mostrarne altri. Un altro è clip-path, ma non concentriamoci su questo oggi. “Le maschere sono immagini; Le clip sono percorsi ”è un modo per pensare alla differenza, anche se certamente crea confusione.
In questo video, vedremo quanto sono simili maske le sue mask-*proprietà sono davvero simili alle proprietà backgrounde background-*. E possono essere usati insieme bene, poiché una maschera è un modo per nascondere alcune parti di un'immagine ma rivelare comunque il contenuto e lo sfondo delle altre parti.
SVG è ottimo per le maschere, poiché la natura vettoriale consente loro di ridimensionarsi bene e la dimensione del file generalmente piccola è piacevole. Uno degli aspetti che creano confusione attorno alle maschere è il file mask-type. Il alphavalore significa che le parti trasparenti dell'immagine diventano le parti trasparenti della maschera (che a volte è più sconvolgente di quanto speri). Un luminancevalore significa che il bianco è opaco e il nero è trasparente e il grigio è in mezzo. O è il contrario? E che dire delle maschere che hanno già un canale alfa? E le aree in un file SVG senza nulla sono considerate alfa trasparenti? Probabilmente? Facciamo un gioco.