Maskování v CSS je jedním ze způsobů, jak skrýt části prvku a ukázat ostatním. Další je clip-path
, ale dnes se na to nezaměřujme. "Masky jsou obrazy; Klipy jsou cesty “je jeden způsob, jak přemýšlet o rozdílu, i když je to jistě matoucí.
V tomto videu se podíváme na to, jak podobné mask
a jeho mask-*
vlastnosti jsou opravdu podobné vlastnostem background
a background-*
. A mohou být použity společně pěkně, sinces a mask je způsob, jak skrýt některé části obrazu, ale přesto odhalit obsah a pozadí ostatních částí.
SVG je skvělé pro masky, protože vektorová povaha jim umožňuje pěkně škálovat a obecně malá velikost souboru je hezká. Jedním z matoucích kousků kolem masek je mask-type
. Mezi alpha
hodnota znamená, že průhledné části obrazu se stanou průhledné části masky (což je někdy více mysl-ohýbání než doufáte). luminance
Hodnota znamená bílá je neprůhledná a černá je transparentní a šedé je mezi nimi. Nebo je to naopak? A co masky, které již mají alfa kanál? A jsou oblasti v souboru SVG, v nichž není nic, považovány za alfa průhledné? Pravděpodobně? Pojďme si zahrát.