mask-image
Использует картинку или градиент как маску: где маска непрозрачна, элемент виден, где прозрачна — исчезает.
Синтаксис
mask-image: linear-gradient(black, transparent);Значения
| Параметр | Тип | Описание |
|---|---|---|
| gradient | image | Самая частая маска: `linear-gradient()` или `radial-gradient()` от непрозрачного к прозрачному. |
| url() | image | Картинка (PNG с прозрачностью или SVG), чья форма вырезает элемент. |
| none | keyword | По умолчанию: маски нет. |
Примеры
Фото, которое растворяется книзу:
<style>
img { mask-image: linear-gradient(black 50%, transparent); }
</style>
<img src="/media/photo-400x250.jpg" alt="A latte" width="400" height="250">Круглая виньетка с мягким краем:
<style>
img { mask-image: radial-gradient(circle, black 40%, transparent 70%); }
</style>
<img src="/media/photo-200x200.jpg" alt="A photo" width="200" height="200">Примечания
Важна только прозрачность маски, а не её цвет. В отличие от clip-path, у маски могут быть мягкие края. Маски устроены как фоны: есть ещё mask-size, mask-repeat, mask-position и сокращённое mask. Без префикса работает во всех актуальных браузерах с 2023 года; старым Chrome и Safari нужен -webkit-mask-image.
См. также
- clip-path — Обрезает элемент по фигуре: видимой остаётся только часть внутри неё.
- linear-gradient() — Плавный переход между цветами вдоль прямой — используется как фоновая картинка.
- radial-gradient() — Переход между цветами от центра к краям.
- opacity — Прозрачность всего элемента вместе с содержимым.
В учебнике
- Обрезка и маски — Как придать элементу любую форму — clip-path с кругом, эллипсом и многоугольником, плавное исчезновение через mask-image с градиентом и обтекание текстом фигуры с shape-outside.