Maskebillede - CSS-tricks | CSS Almanak 2025

A maski CSS skjuler en del af elementet på.

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

Sig, at du havde et element med en fotografisk baggrund og en sort-hvid SVG-grafik, der kunne bruges som en maske, som denne:

Du kan indstille billedet som a background-imageog masken som et mask-imagepå det samme element og få noget som dette:

Masker deler meget til fælles med baggrunde, idet du kan dimensionere dem, placere dem og gentage dem og lignende ligesom baggrunde. Se de relaterede egenskaber nedenfor. Men her er en anden interessant ting ved masker, som de deler med baggrunde: de kan være gradienter.

Her er den samme baggrundsgrafik, kun med en linear-gradientmaske, der dækker den, hvilket gør toppen gennemsigtig, der falmer bunden, som slet ikke er gennemsigtig:

Det fungerer, fordi toppen af det linear-gradienter transparent. Jeg ville have antaget, at det ville fungere, hvis det var whiteså godt, som det mask-typevar luminance, men det ser ikke ud til at fungere i nogen browser for mig.

Når vi taler om luminancemasker, ser det ikke ud til at fungere for billeder som masker, der er et rasterformat som JPG.webp eller PNG for mig. Opdatering : Reader Micheal Hall skriver ind med en demo, hvor det kan have noget at gøre med at bruge de lange håndegenskaber. Firefox ser ud til at understøtte dette koncept, hvis du kun bruger stenografien.

Men alfamasker ser ud til at fungere fint. Som i rastergrafik, der bruger faktisk alfa-gennemsigtighed. Sådan her:

Og bare for at bevise et punkt, en farveanimation, du kan se gennem masken:

Den mask-imageegenskab kan også anvendes direkte i SVG elementer. Ligesom tjek denne elliptiske maske, der også har et sløret filter:

Det ser lidt ud som om du kunne fange den SVG-maske og anvende den på andre elementer med, mask-image: url(#mask);men jeg finder ikke, at det faktisk fungerer. Det fungerer kun inden for SVG og har en grim bivirkning ved helt at slette et billede, hvis det bruges uden for SVG.