mask¶

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

Это достигается путем маскировки или обрезания изображения в определенных точках.

Сокращенное свойство mask также сбрасывает mask-border до ее начального значения. Поэтому рекомендуется использовать mask до остальных свойств, чтобы переопределить любые настройки маски ранее в каскаде. Это гарантирует, что mask-border также была сброшено, чтобы позволить новым стилям вступить в силу.

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

Синтаксис¶

/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png); /* Pixel image used as mask */
mask: url(masks.svg#star); /* Element within SVG graphic used as mask */

/* Combined values */

/* Element within SVG graphic used as luminance mask */
mask: url('masks.svg#star') luminance;

/* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */
mask: url('masks.svg#star') 40px 20px;

/* Element within SVG graphic used as mask with a width and height of 50px */
mask: url('masks.svg#star') 0 0/50px 50px;

/* Element within SVG graphic used as horizontally repeated mask */
mask: url('masks.svg#star') repeat-x;

/* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url('masks.svg#star') stroke-box;

/* Element within SVG graphic used as mask and combined with background using non-overlapping parts */
mask: url('masks.svg#star') exclude;

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

Значения¶

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

mask-image: none;
mask-mode: match-source;
mask-repeat: no-repeat;
mask-position: center;
mask-clip: border-box;
mask-origin: border-box;
mask-size: auto;
mask-composite: add;

Применяется ко всем элементам

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

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

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

Описание и примеры¶

.target {
  mask: url('#c1') luminance;
}

.anothertarget {
  mask: url('resources.svg#c1') 50px 30px/10px 10px repeat-x
    exclude;
}