Maska-slika - CSS-trikovi | CSS Almanah 2025

A masku CSS-u skriva dio elementa na koji se primjenjuje.

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

Recimo da ste imali element s fotografskom pozadinom i crno-bijelu SVG grafiku za upotrebu kao masku, poput ove:

Možete postaviti sliku kao a, background-imagea masku kao a mask-imagena isti element i dobiti nešto poput ovoga:

Maske imaju puno zajedničkog sa pozadinom jer ih možete prilagoditi veličini, postaviti ih i ponoviti, slično kao i pozadine. Pogledajte srodna svojstva u nastavku. Ali evo još jedne zanimljivosti u vezi s maskama koje dijele sa pozadinom: mogu biti gradijenti.

Evo te iste grafike u pozadini, samo s linear-gradientmaskom koja je prekriva, što čini da vrh prozirno blijedi, a dno uopće nije prozirno:

To djeluje jer vrh linear-gradientje transparent. Ja bih pretpostaviti da će raditi ako je whitekao i dok je mask-typebio luminance, ali to ne čini na posao u bilo kojem pregledniku za mene.

Kad smo kod luminancemaski, čini se da to ne funkcionira za slike kao maske koje su za mene rasterski format poput JPG.webp-a ili PNG-a. Ažuriranje : Reader Micheal Hall piše s demonstracijom gdje to može imati neke veze s korištenjem dugih svojstava. Čini se da Firefox podržava ovaj koncept ako koristite samo stenografiju.

Ali čini se da alfa maske djeluju sasvim dobro. Kao i u rasterskim grafikama koje koriste stvarnu alfa prozirnost. Kao ovo:

I samo da dokažemo poantu, animaciju u boji koju možete vidjeti kroz masku:

mask-imageImovine također se može koristiti izravno u SVG elemenata. Poput provjerite ovu eliptičnu masku koja također ima zamućeni filtar:

Izgleda nekako kao da biste mogli uhvatiti tu SVG masku i primijeniti je na druge elemente s, mask-image: url(#mask);ali ne smatram da to zapravo djeluje. Djeluje samo u SVG-u i ima gadnu nuspojavu potpuno brisanja slike ako se koristi izvan SVG-a.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.