Obraz-maska - CSS-Tricks | Almanach CSS 2025

A maskw CSS ukrywa zastosowaną część elementu.

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

Załóżmy, że masz element z fotograficznym tłem i czarno-białą grafiką SVG do użycia jako maska, na przykład:

Możesz ustawić obraz jako a, background-imagea maskę jako a mask-imagena tym samym elemencie i uzyskać coś takiego:

Maski mają wiele wspólnego z tłami, ponieważ można je zmieniać, ustawiać, powtarzać i tak jak tła. Zobacz powiązane właściwości poniżej. Ale jest jeszcze jedna interesująca rzecz dotycząca masek, które dzielą z tłem: mogą to być gradienty.

Oto ta sama grafika tła, tylko z linear-gradientzakrywającą ją maską, która sprawia, że górna część jest przezroczysta, blaknie, a spód nie jest w ogóle przezroczysty:

To działa, ponieważ górna część linear-gradientjest transparent. Przypuszczałem, że zadziała, gdyby było whitetak długo, jak mask-typebyło luminance, ale to nie wydaje się działać w żadnej przeglądarce dla mnie.

Mówiąc o luminancemaskach, to wydaje się nie działać w przypadku obrazów-masek, które są dla mnie w formacie rastrowym, takim jak JPG.webp lub PNG. Aktualizacja : Czytelnik Micheal Hall pisze, przedstawiając demo, w którym może to mieć coś wspólnego z używaniem właściwości odręcznych. Wydaje się, że Firefox obsługuje tę koncepcję, jeśli używasz tylko skrótu.

Ale maski alfa wydają się działać dobrze. Podobnie jak w przypadku grafiki rastrowej, która wykorzystuje rzeczywistą przezroczystość alfa. Lubię to:

Aby to udowodnić, kolorowa animacja, którą można zobaczyć przez maskę:

mask-imageNieruchomość może być również stosowany bezpośrednio wewnątrz elementów SVG. Na przykład sprawdź tę eliptyczną maskę, która ma również rozmyty filtr:

Wygląda na to, że możesz złapać tę maskę SVG i zastosować ją do innych elementów, mask-image: url(#mask);ale uważam, że to nie działa. Działa tylko w SVG i ma nieprzyjemny efekt uboczny polegający na całkowitym wymazaniu obrazu, jeśli jest używany poza SVG.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.