# 185: Pelaaminen CSS-naamioiden kanssa - CSS-temppuja

Anonim

CSS: n peittäminen on yksi tapa piilottaa elementin osat ja näyttää muille. Toinen on clip-path, mutta älkäämme keskittykö siihen tänään. ”Naamiot ovat kuvia; Leikkeet ovat polkuja ”on yksi tapa ajatella eroa, vaikka se varmasti hämmentää.

Tässä videossa tarkastelemme kuinka samankaltaisia maskja sen mask-*ominaisuudet ovat todella samanlaisia ​​kuin backgroundja background-*. Ja niitä voidaan käyttää yhdessä hienosti, sinces mask on tapa piilottaa kuvan osia, mutta paljastaa silti muiden osien sisällön ja taustan.

SVG on loistava maskeille, koska vektoriluonto antaa niiden skaalata hienosti ja yleensä pieni tiedostokoko on mukava. Yksi hämmentävistä paloista naamioiden ympärillä on mask-type. alphaArvo tarkoittaa, että läpinäkyvän kuvan osat tulee läpinäkyviin osiin maskin (joka on joskus enemmän aistiharhoja kuin toivoa). luminanceArvo välineet valkoinen on läpinäkymätön ja musta on läpinäkyvä ja harmaa on välillä. Vai onko päinvastoin? Entä naamarit, joilla on jo alfa-kanava? Ja pidetäänkö SVG-tiedoston alueita, joissa ei ole mitään, alfa-läpinäkyvinä? Todennäköisesti? Pidetään näytelmä.