Maska-obraz - Triky CSS | Almanach CSS 2025

A maskv CSS skryje časť prvku, na ktorú sa aplikuje.

.el ( mask-image: url(star.svg); )

Povedzme, že ste použili prvok s fotografickým pozadím a čiernobielu grafiku SVG, ktorú môžete použiť ako masku, napríklad takto:

Môžete nastaviť obrázok ako a background-imagea masku ako mask-imagena rovnakom prvku a získať niečo také:

Masky majú veľa spoločného s pozadiami, pretože ich môžete zväčšiť, umiestniť a opakovať, podobne ako pozadie. Nižšie nájdete súvisiace vlastnosti. Ale tu je ešte jedna zaujímavosť o maskách, ktoré zdieľajú s pozadím: môžu to byť prechody.

Tu je rovnaká podkladová grafika, iba s linear-gradientmaskou, ktorá ju zakrýva, čo robí vrchnú priehľadnú blednutím spodnej, ktorá vôbec nie je priehľadná:

To funguje, pretože vrchol linear-gradientje transparent. Predpokladal by som, že to bude fungovať, ak to bude whitetaké dobré, aké to mask-typebolo luminance, ale zdá sa , že to v žiadnom prehliadači nefunguje.

Keď už hovoríme o luminancemaskách, zdá sa, že to nefunguje pre obrázky ako masky, ktoré majú pre mňa rastrový formát ako JPG.webp alebo PNG. Aktualizácia : Čitateľ Micheal Hall píše s ukážkou, kde by to mohlo mať niečo spoločné s používaním vlastností z dlhej ruky. Zdá sa, že Firefox podporuje tento koncept, ak používate iba skratku.

Zdá sa však, že alfa masky fungujú úplne dobre. Rovnako ako v rastrovej grafike, ktorá využíva skutočnú priehľadnosť alfa. Páči sa ti to:

A len na dokázanie bodu, farebná animácia, ktorú môžete vidieť cez masku:

mask-imageNehnuteľnosť môže byť tiež použitá priamo vnútri SVG prvkov. Rovnako ako vyskúšať túto eliptickú masku, ktorá má tiež rozmazaný filter:

Vyzerá to trochu, akoby ste mohli zachytiť masku SVG a použiť ju na ďalšie prvky, mask-image: url(#mask);ale nezdá sa mi, že by to skutočne fungovalo. Funguje iba v rámci SVG a má nepríjemný vedľajší účinok úplného vymazania obrázka, ak sa použije mimo SVG.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.