CSS свойство mask-mode

Определение и использование

mask-mode Атрибут определяет, должно ли изображение фильтра被视为亮度 фильтр или alpha фильтр.

Пример

Сделайте изображение фильтра видимым как亮度 фильтр:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

Попробуйте сами

Синтаксис CSS

mask-mode: match-source|luminance|alpha|initial|inherit;

Значение атрибута

Значение Описание
match-source

Если атрибут mask-image является изображением (URL изображения или градиент), то установите mask-mode в alpha.

Если атрибут mask-image является SVG <mask>, то используйте атрибут mask-type элемента <mask>.

Это значение по умолчанию.
luminance Использовать brightness-значение маскирующего изображения в качестве значения маски.
alpha Использовать alpha-значение маскирующего изображения в качестве значения маски.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Инherit this property from its parent element. См. также inherit.

Технические детали

Значение по умолчанию: match-source
Инheritability: Нет
Создание анимации: Не поддерживается. См. также:Свойства, связанные с анимацией.
Версия: Модуль маскирования CSS уровня 1
Синтаксис JavaScript: object.style.maskMode="alpha"

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Кроме Эдж Фаерфокс Сафари Опера
120 120 53 15.4 106

Связанные страницы

Учебник:CSS маска

См. также:CSS свойство mask

См. также:CSS свойство mask-clip

См. также:CSS свойство mask-composite

См. также:CSS свойство mask-image

См. также:CSS свойство mask-origin

См. также:CSS свойство mask-position

См. также:CSS свойство mask-repeat

См. также:CSS свойство mask-size

См. также:CSS свойство mask-type