# 185: CSS-maskidega mängimine - CSS-trikid

Anonim

CSS-is maskeerimine on üks viis elemendi osade peitmiseks ja teistele kuvamiseks. Teine on clip-path, aga ärme täna sellele keskendu. “Maskid on pildid; Klipid on teed ”on üks viis erinevusele mõelda, ehkki see läheb kindlasti segaseks.

Selles videos vaatleme, kui sarnased maskja selle mask-*omadused on tegelikult backgroundja background-*omadustega sarnased . Ja neid saab kenasti koos kasutada, sinces mask on viis pildi mõningate osade peitmiseks, kuid paljastab siiski teiste osade sisu ja tausta.

SVG sobib suurepäraselt maskide jaoks, kuna vektorne olemus võimaldab neil kenasti skaalata ja üldiselt väike failisuurus on kena. Üks segadusttekitav maskide ümber on mask-type. alphaVäärtus tähendab, et läbipaistva pildi osad muutunud läbipaistvaks osad mask (mis on mõnikord rohkem Hallutsinatsioone kui loodate). luminanceVäärtus vahenditega white on läbipaistmatu ja must on läbipaistev ja hall vahele. Või on see vastupidi? Ja kuidas on maskidega, millel on alfa kanal juba olemas? Ja kas SVG-faili alasid, kus pole midagi, peetakse alfa-läbipaistvaks? Ilmselt? Laseme mängida.