# 185: Játék CSS maszkokkal - CSS-trükkök

Anonim

A CSS-ben való maszkolás az elemeinek elrejtésének és mások megmutatásának egyik módja. A másik az clip-path, de ma ne erre koncentráljunk. „A maszkok képek; A klipek utak ”az egyik módszer arra, hogy gondolkodjunk a különbségen, bár ez minden bizonnyal zavaros.

Ebben a videóban megnézzük, mennyire hasonlóak maskés mask-*tulajdonságai valóban hasonlóak a backgroundés background-*tulajdonságaihoz. És szépen együtt is használhatók, a maszk elnyeri a kép egyes részeit, de a többi rész tartalma és háttere mégis felfedhető.

Az SVG kiválóan használható maszkokhoz, mivel a vektoros természet lehetővé teszi számukra, hogy szépen méretezzenek, és az általában kis fájlméret is szép. Az egyik zavaros bit a maszkok körül a mask-type. Az alphaérték azt jelenti, hogy a kép átlátszó részei a maszk átlátszó részévé válnak (ami néha jobban elgondolkodtató, mint reméled). Az luminanceérték azt jelenti, hogy a fehér átlátszatlan, a fekete átlátszó, a szürke pedig kettő között van. Vagy fordítva van? És mi van a maszkokkal, amelyek már rendelkeznek alfa csatornával? És az SVG fájl területei, amelyekben nincs semmi, alfa-átlátszónak számítanak? Valószínűleg? Játsszunk egy játékot.