Maskovanie obrázkov v CSS pomocou vlastnosti maska-obrázok

Blog

Maskovanie obrázkov v CSS pomocou vlastnosti maska-obrázok

Pokryli sme používanie klip-cesta vlastnosť na orezávanie pomocou CSS, takže je len prirodzené, že teraz prejdeme na maskovanie. Na rozdiel od orezávania, kde je časť obrázku alebo prvku buď úplne neviditeľná alebo úplne viditeľná, pomocou maskovania môžeme skryť alebo zobraziť časti obrázku s rôznym stupňom krytia.

Maskovanie v CSS sa vykonáva pomocou vlastnosti mask-image a ako maska ​​musí byť poskytnutý obrázok. Čokoľvek, čo je v maske obrázku 100% čierne, musí byť úplne viditeľné, všetko, čo je 100% priehľadné, bude úplne skryté a čokoľvek medzi tým obrázok čiastočne zamaskuje. Lineárne a radiálne gradienty v CSS sú generované obrázky, takže ich možno použiť ako masku obrázka. SVG, ktoré používajú prvok masky, je možné použiť aj ako masku obrázka. Pozrime sa na 3 možnosti obrázkových masiek na konkrétnych príkladoch:

Maskovanie pomocou prechodov

Najprv použijeme jednoduchý lineárny gradient, ktorý prechádza z priehľadného na čierny. Prvý obrázok je náš predvolený počiatočný obrázok a pre druhý obrázok je ako hodnota obrázku masky použitý lineárny gradient:

generátor rozloženia css

Bez masky

najlepší nápad pre python pre ipad

#css

www.digitalocean.com

Maskovanie obrázkov v CSS pomocou vlastnosti maska-obrázok

Rýchly návod s príkladmi, ako používať masky obrázkov, prechodov a SVG v CSS. Pokrývali sme použitie vlastnosti clip-path na orezávanie pomocou CSS.