mask-image¶

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

Синтаксис¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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

изображение, используемое в качестве слоя маски.

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

1

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.

Пример¶

1

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

1
2
3
4
5
6
7

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

Комментарии