Свойство mask-image CSS

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

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

Совет:Линейные и радиальные градиенты в CSS также могут использоваться в качестве изображений маски.

Пример

Пример 1

Создание слоев маски для изображений:

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

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

Пример 2

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

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

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

Пример 3

Используйте элемент SVG <mask> для создания маски для изображения:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

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

Пример 4

Используйте элемент SVG <mask> для создания дополнительного слоя маски для изображения:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

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

Синтаксис CSS

mask-image: none|image|url()|initial|inherit;

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

Значение Описание
none Значение по умолчанию. Не использовать изображение для маски.
image Используется в качестве изображения для маски.
url() URL-ссылка на изображение или элемент SVG <mask>.
initial Установить этот атрибут в его значение по умолчанию. См.: initial.
inherit Эта атрибут inherits от родительского элемента. См.: inherit.

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

Значение по умолчанию: none
Инheritability: Нет
Создание анимации: Не поддерживается. См.:Свойства, связанные с анимацией.
Версия: Модуль маскирования CSS уровня 1
Синтаксис JavaScript: object.style.maskImage="url(star.svg)"

Поддержка браузеров

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

Числа с префиксом '-webkit-' показывают первую версию, которая поддерживает этот префикс.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 15 -webkit-

Соответствующие страницы

Урок:CSS маски

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

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

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

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

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

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

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

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

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