Maskebilde - CSS-triks | CSS-almanakk 2025

A maski CSS skjuler en del av elementet brukes på.

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

Si at du hadde et element med fotografisk bakgrunn, og en svart-hvitt SVG-grafikk å bruke som en maske, slik:

Du kan sette bildet som en background-imageog masken som et mask-imagepå samme element, og få noe sånt:

Masker har mye til felles med bakgrunner ved at du kan dimensjonere dem, plassere dem og gjenta dem og slikt akkurat som bakgrunner. Se relaterte egenskaper nedenfor. Men her er en annen interessant ting med masker som de deler med bakgrunn: de kan være graderinger.

Her er den samme bakgrunnsgrafikken, bare med en linear-gradientmaske som dekker den, noe som gjør toppen gjennomsiktig og blekner bunnen som ikke er gjennomsiktig:

Det fungerer fordi toppen av det linear-gradienter transparent. Jeg ville ha antatt at det ville fungere hvis det var whitelike bra som det mask-typevar luminance, men det ser ikke ut til å fungere i noen nettleser for meg.

Når vi snakker om luminancemasker, ser det ikke ut til å fungere for bilder som masker som er et rasterformat som JPG.webp eller PNG for meg. Oppdatering : Leseren Micheal Hall skriver inn med en demo der det kan ha noe å gjøre med å bruke de lange håndegenskapene. Firefox ser ut til å støtte dette konseptet hvis du bare bruker stenografi.

Men alfamasker ser ut til å fungere helt fint. Som i rastergrafikk som bruker faktisk alfa-gjennomsiktighet. Som dette:

Og bare for å bevise et poeng, en farge-animasjon du kan se gjennom masken:

Den mask-imageegenskap kan også brukes direkte på innsiden SVG elementer. Som å sjekke ut denne elliptiske masken som også har et uskarpt filter:

Det ser ut som om du kan fange den SVG-masken og bruke den på andre elementer med, mask-image: url(#mask);men jeg finner ikke det faktisk fungerer. Det fungerer bare i SVG, og har en ekkel bivirkning av å helt slette et bilde hvis det brukes utenfor SVG.