Маска-режим - CSS-хитрости

Свойство mask-modeCSS указывает, обрабатывается ли изображение слоя маски CSS как альфа-маска или маска яркости.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Синтаксис

mask-mode: alpha | luminance | match-source

Свойство принимает одно ключевое слово значение, или разделенный запятыми список из двух или всех трех из alpha, luminanceи mask-sourceзначения.

Первоначальный значение: match-source
Применимо: ко всем элементам. В SVG это применяется к элементам контейнера, за исключением элемента, всех графических элементов.
Унаследовано: нет
Расчетное значение: как указано
Тип анимации: дискретная

Значения

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: указывает, что альфа-значения (альфа-канал) изображения слоя маски должны использоваться в качестве значений маски.
luminance: указывает, что значения яркости изображения маски должны использоваться в качестве значений маски.
match-source: значение по умолчанию, которое устанавливает режим маски на альфа, если ссылка на маску для mask-imageсвойства является элементом CSS, например URL-адресом изображения или градиентом. Однако, если ссылка на маску для mask-imageсвойства является элементом SVG , необходимо использовать значение, указанное свойством типа маски указанного элемента.
initial: применяет настройку свойства по умолчанию, то есть match-source.
inherit: принимает значение режима маски родительского объекта.
unset: удаляет текущий режим маски из элемента.

Использование нескольких значений

Это свойство может принимать список значений, разделенных запятыми, для режимов маски, и каждое значение применяется к соответствующему изображению слоя маски, указанному в свойстве mask-image.

В следующем примере первое значение определяет режим маски, соответствующий первому изображению, второе значение - второму изображению и так далее.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Маски альфа и яркости

Маскирование в CSS включает два метода, которые имеют некоторые различия в вычислении значений маски.

Альфа-маски

Изображения состоят из пикселей, каждый пиксель имеет некоторые данные, содержащие значения цвета и, возможно, альфа-значения с информацией о прозрачности. Изображение с альфа-каналом может быть альфа-маской , как изображения PNG с черными и прозрачными областями.

В простой операции маскирования у нас есть элемент и изображение маски, помещенное поверх него. Альфа-значение каждого пикселя в изображении маски будет объединено с соответствующим пикселем в элементе.

Если альфа-значение равно нулю (т.е. прозрачно), он выигрывает, и эта часть элемента замаскирована (т.е. скрыта).
Значение альфа, равное единице (т.е. полностью непрозрачный), позволяет видеть этот пиксель элемента.
Значение от 0 до 1 (например, 0,5) позволяет пикселю быть видимым, но с определенным уровнем прозрачности.

Таким образом, в этом методе значение маски в данной точке - это просто значение альфа-канала в этой точке изображения маски, а цветовые каналы не влияют на значение маски.

Пример ниже представляет собой альфа-маску, которая содержит только черные (альфа-значение 1) и прозрачные области (альфа-значение 0), и вы можете увидеть результат, в котором некоторые части полностью видны, а другие полностью прозрачны:

Использование PNG с альфа-каналом в качестве изображения маски

Но в следующем примере мы используем градиент с разным уровнем прозрачности. Результат не только видимый или прозрачный, но и есть несколько полупрозрачных областей:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

А вот как выглядит результат в браузере:

Использование линейного градиента в качестве изображения маски

Маски яркости

В маске яркости важны цвета и альфа-значения. Когда значение альфа равно 0 (т.е. полностью прозрачный), элемент скрыт; когда альфа-значение равно 1, значения маски меняются в зависимости от цветового канала этого пикселя. Например, когда цвет белый, элемент виден; в случае черной области элемент скрыт.

В то время как вычисление значений маски в альфа-маске основано только на альфа-значениях изображения маски, значения маски для маски яркости вычисляются из значений яркости и альфа-канала. Браузеры делают это следующим образом:

Вычислить значение яркости из значений цветового канала.
Умножьте вычисленное значение яркости на соответствующее значение альфа, чтобы получить значение маски.

/ объяснение Для получения дополнительной информации об этих расчетах вы можете проверить раздел обработки масок в спецификации CSS Masking Module 1 из сентябрьского проекта редактора 2019 года.

Сильфон - это изображение маски с белым солнцем в центре и прозрачными областями вокруг него. Как видите, области while полностью видны:

Использование изображения PNG с альфа-каналом и белыми областями в качестве изображения маски

В следующем примере цветной градиент используется в качестве изображения маски, и вы можете увидеть влияние разных цветов на значения маски в режиме яркости: