Mask-bild - CSS-tricks | CSS Almanack 2025

A maski CSS döljer en del av elementet tillämpas på.

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

Anta att du hade ett element med fotografisk bakgrund och en svartvit SVG-grafik att använda som en mask, så här:

Du kan ställa in bilden som a background-imageoch masken som en mask-imagepå samma element och få något så här:

Masker delar mycket gemensamt med bakgrunder genom att du kan dimensionera dem, placera dem och upprepa dem och liknande precis som bakgrunder. Se relaterade egenskaper nedan. Men här är en annan intressant sak om masker som de delar med bakgrunder: de kan vara lutningar.

Här är samma bakgrundsbild, bara med en linear-gradientmask som täcker den, vilket gör att den övre transparenta bleknar botten som inte är transparent alls:

Det fungerar för att toppen av den linear-gradientär transparent. Jag skulle ha antagit att det skulle fungera om det var whitelika bra som det mask-typevar luminance, men det verkar inte fungera i någon webbläsare för mig.

På tal om luminancemasker verkar det inte fungera för bilder-som-masker som är ett rasterformat som JPG.webp eller PNG för mig. Uppdatering : Läsaren Micheal Hall skriver in med en demo där det kan ha något att göra med att använda de långa handegenskaperna. Firefox verkar stödja detta koncept om du bara använder stenografi.

Men alfamaskar verkar fungera bra. Som i rastergrafik som använder faktisk alfa-transparens. Så här:

Och bara för att bevisa en punkt, en färganimering som du kan se genom masken:

Den mask-imageegenskapen kan också användas direkt inuti SVG element. Som att kolla in den här elliptiska masken som också har ett suddigt filter:

Det ser ut som om du kan häva den SVG-masken och applicera den på andra element med mask-image: url(#mask);men jag tycker inte att det faktiskt fungerar. Det fungerar bara inom SVG och har en otäck bieffekt av att helt radera en bild om den används utanför SVG.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.