Obrázek masky - Triky CSS | Almanach CSS 2025

A maskv CSS skryje část prvku, na kterou se použije.

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

Řekněme, že jste jako masku použili prvek s fotografickým pozadím a černobílou grafikou SVG:

Na stejném prvku můžete nastavit obrázek jako background-imagea masku jako mask-imagea získat něco takového:

Masky sdílejí hodně společného s pozadími v tom, že je můžete měnit jejich velikost, umístit je a opakovat stejně jako pozadí. Viz související vlastnosti níže. Ale tady je další zajímavá věc o maskách, které sdílejí s pozadím: mohou to být přechody.

Tady je stejná grafika pozadí, pouze s linear-gradientmaskou, která ji zakrývá, díky čemuž je horní průhledná blednutí spodní části, která vůbec není průhledná:

To funguje, protože vrchol linear-gradientje transparent. Předpokládal bych, že to bude fungovat, pokud to whitebude tak dlouho, jak to mask-typebylo luminance, ale zdá se , že to v žádném prohlížeči nefunguje.

Když už mluvíme o luminancemaskách, zdá se, že to nefunguje pro obrázky jako masky, které jsou pro mě rastrovým formátem, jako je JPG.webp nebo PNG. Aktualizace : Reader Micheal Hall píše s ukázkou, kde by to mohlo mít něco společného s používáním vlastností z ruky. Zdá se, že Firefox tento koncept podporuje, pokud používáte pouze zkratku.

Zdá se však, že alfa masky fungují dobře. Stejně jako v rastrové grafice, která využívá skutečnou průhlednost alfa. Takhle:

A jen pro prokázání bodu, barevná animace, kterou můžete vidět skrz masku:

mask-imageNemovitost může být také použita přímo uvnitř SVG prvků. Podívejte se na tuto eliptickou masku, která má také rozmazaný filtr:

Vypadá to, že byste mohli zachytit tu SVG masku a použít ji na jiné prvky, mask-image: url(#mask);ale nenajdu, že by to skutečně fungovalo. Funguje pouze v rámci SVG a má ošklivý vedlejší účinek úplného vymazání obrázku, pokud je použit mimo SVG.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.