Перейти к содержанию

mask-image

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

Маски и Фигуры

Синтаксис

/* 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), transparent);
mask-image: image(url('mask.png'), skyblue);

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

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

Значения

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

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

mask-image: none;

Спецификации

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

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

Пример

<div id="masked"></div>
#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');
}