Классы mask-alpha, mask-luminance и mask-source задают mask-mode — какая
составляющая изображения маски управляет видимостью элемента. Берите
mask-luminance, когда маска нарисована чёрным и белым, а не прозрачностью.
Пример
Режимы
Маска — непрозрачный градиент от чёрного к белому. Пунктирная рамка показывает границы элемента с маской.
/* Demo only. The Framework has no class for mask-image, so each example sets its own. The mask is inline on purpose: an example renders in a sandboxed frame with an opaque origin, and a mask image is fetched in CORS mode, so a file from the site is refused and the masked element disappears with it. */.demo-mask-fade {
-webkit-mask-image: linear-gradient(90deg, #000, #fff);
mask-image: linear-gradient(90deg, #000, #fff);
}
Классы
Класс
CSS
Значения
mask-alpha
mask-mode: alpha
—
mask-luminance
mask-mode: luminance
—
mask-source
mask-mode: match-source
—
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Классы маски не задают саму маску: изображение маски (mask-image) задаётся
в CSS проекта, как в примерах на этой странице.
Какой режим выбрать
Класс
Элемент виден там, где маска
mask-alpha
непрозрачна
mask-luminance
светлая; чёрный скрывает, белый показывает
mask-source
по типу источника: для изображения и градиента — как mask-alpha, для элемента <mask> SVG — по его типу маски; значение по умолчанию
HTML
<divclass="mask-luminance">…</div>
Ограничения
Классы задают свойство без префикса -webkit-: браузер, который знает
маску только с префиксом, режим не применяет.
У семейства нет префиксов ширины экрана и состояния.
