# 185: Spēlē ar CSS maskām - CSS-triki

Anonim

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 maskun tā mask-*īpašības patiešām ir līdzīgas tām backgroundun 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 alphavē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). luminanceVē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.