mask-image CSS

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

Значение по умолчанию:

none

Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use css-masks? Data on support for the css-masks feature across the major browsers from caniuse.com.

Синтаксис

/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image> values */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: unset;

Значения

  • none — это ключевое слово интерпретируется как прозрачный слой черного изображения.
  • <mask-source> — ссфлка <url> на <mask> или изображение.
  • <image> — изображение, используемое в качестве слоя маски.

Примеры

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}

HTML

<div id="masked"></div>