mask-image

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

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

• clip-path
• mask
• mask-border
• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width
• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-type

• shape-image-threshold
• shape-margin
• shape-outside

Синтаксис

/* 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;

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

• CSS Masking Module Level 1

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

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

Пример

HTMLCSS

<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');
}

Комментарии