Maskēšana CSS ir viens no veidiem, kā paslēpt elementa daļas un parādīt citiem. Cits ir clip-path
, bet šodien tam nepievērsīsimies. “Maskas ir attēli; Klipi ir ceļi ”ir viens no veidiem, kā domāt par atšķirību, lai gan tas noteikti kļūst mulsinošs.
Šajā videoklipā mēs aplūkosim, cik līdzīgi mask
un tā mask-*
īpašības patiešām ir līdzīgas tām background
un background-*
īpašībām. Un tos var labi izmantot kopā, sinces maska ir veids, kā paslēpt dažas attēla daļas, bet tomēr atklāt pārējo daļu saturu un fonu.
SVG ir lieliski piemērots maskām, jo vektoru daba ļauj tām skaisti mērogoties un parasti mazais faila lielums ir jauks. Viens no mulsinošajiem gabaliem ap maskām ir mask-type
. Šīs alpha
vērtības nozīmē, ka caurspīdīgas daļas attēla kļūst par caurspīdīgas daļas maskas (kas dažreiz ir vairāk prāta saliekuma nekā cerība). luminance
Vērtība ir balts ir necaurspīdīga un melnā ir pārredzama un pelēks ir pa vidu. Vai arī ir otrādi? Un kā ar maskām, kurām jau ir alfa kanāls? Un vai SVG faila apgabali, kuros nav nekā, tiek uzskatīti par alfa caurspīdīgiem? Droši vien? Paspēlēsimies.