mask-image
Używa obrazu lub gradientu jako maski przezroczystości elementu.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.maskImage = "linear-gradient(black, transparent)"
Przykład
#.scroller {
overflow-x: auto;
mask-image: linear-gradient(to right, black 80%, transparent);
}<div style="display: flex; gap: 8px; overflow-x: auto; mask-image: linear-gradient(to right, black 80%, transparent); -webkit-mask-image: linear-gradient(to right, black 80%, transparent);">
<span class="box">HTML</span><span class="box">CSS</span><span class="box">JavaScript</span><span class="box">TypeScript</span><span class="box">Python</span><span class="box">React</span>
</div>Definicja i zastosowanie
#Właściwość mask-image określa maskę: tam, gdzie maska jest nieprzezroczysta, element jest widoczny, a tam, gdzie przezroczysta, element znika. W odróżnieniu od clip-path maska może mieć płynne przejścia.
Najczęstsze zastosowanie to gradient liniowy, który stopniowo wygasza element przy krawędzi, na przykład koniec przewijanej listy albo zdjęcie znikające w tle.
Właściwości mask-size, mask-position i mask-repeat działają analogicznie do odpowiedników dla tła. Maska z pliku SVG albo PNG pozwala nadać elementowi dowolny kształt.
Składnia
#mask-image: none | url(…) | <gradient> [, …]*;Wartości
#- Brak maski, element w pełni widoczny.
linear-gradient(black, transparent)
wygaszanie
Obraz stopniowo znika ku dołowi.radial-gradient(circle, black 40%, transparent 70%)
winieta
Widoczny środek, wygaszone brzegi.linear-gradient(to right, black 70%, transparent)
krawędź
Wygaszona prawa krawędź.
Wartości w praktyce
#none
.demo { mask-image: none; }linear-gradient(black, transparent)
.demo { mask-image: linear-gradient(black, transparent); }radial-gradient(circle, black 40%, transparent 70%)
.demo { mask-image: radial-gradient(circle, black 40%, transparent 70%); }linear-gradient(to right, black 70%, transparent)
.demo { mask-image: linear-gradient(to right, black 70%, transparent); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wygaszona krawędź przewijanego paska to subtelna podpowiedź, że jest tam więcej treści.
- Dla starszych przeglądarek dodaj wersję z przedrostkiem
-webkit-mask-image.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.