mask

Базовая линия 2023

Новое

С декабря 2023 года эта функция работает на последних устройствах и версиях браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

Свойство mask CSS сокращенного свойства скрывает элемент (частично или полностью), маскируя или обрезая изображение в определённых точках.

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

Составные свойства

Это сокращённое свойство для следующих свойств CSS:

Синтаксис

/* 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 */
mask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px; /* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */
mask: url(masks.svg#star) 0 0/50px 50px; /* Element within SVG graphic used as mask with a width and height of 50px */
mask: url(masks.svg#star) repeat-x; /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */

/* Global values */
mask: inherit;
mask: initial;
mask: revert;
mask: revert-layer;
mask: unset;

/* Multiple masks */
mask:
  url(masks.svg#star) left / 16px repeat-y,
  /* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px */
    url(masks.svg#circle) right / 16px repeat-y; /* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px */

Значения

<mask-reference>: Устанавливает источник изображения маски. См. mask-image.
<masking-mode>: Устанавливает режим маскирования изображения маски. См. mask-mode.
<position>: Устанавливает положение изображения маски. См. mask-position.
<bg-size>: Устанавливает размер изображения маски. См. mask-size.
<repeat-style>: Устанавливает повторение изображения маски. См. mask-repeat.
<geometry-box>: Если задано только одно значение <geometry-box>, оно устанавливает как mask-origin, так и mask-clip. Если присутствуют два значения <geometry-box>, то первое устанавливает mask-origin, а второе — mask-clip.
<geometry-box> | no-clip: Устанавливает область, на которую влияет изображение маски. См. mask-clip.
<compositing-operator>: Устанавливает операцию композиции, используемую для текущего слоя маски. См. mask-composite.

Формальное определение

Начальное значение	как каждое из свойств сокращенного свойства: `mask-image`: `none` `mask-mode`: `match-source` `mask-repeat`: `repeat` `mask-position`: `0% 0%` `mask-clip`: `border-box` `mask-origin`: `border-box` `mask-size`: `auto` `mask-composite`: `add`
Применимо к	всем элементам; в SVG, он применяется к контейнерным элементам, за исключением элемента `<defs>` и всех графических элементов
Наследуется	нет
Проценты	как каждое из свойств сокращенного свойства: `mask-position`: относятся к размеру области рисования маски минус размер изображения слоя маски (см. текст для `background-position`)
Вычисленное значение	как каждое из свойств сокращенного свойства: `mask-image`: как указано, но с абсолютными значениями `<url>` `mask-mode`: как указано `mask-repeat`: Состоит из двух ключевых слов, по одному на размерность `mask-position`: Состоит из двух ключевых слов, представляющих начало отсчета и двух смещений от этого начала отсчета, каждое задано как абсолютная длина (если задана <length>), в противном случае как процент. `mask-clip`: как указано `mask-origin`: как указано `mask-size`: как указано, но с относительными длинами, преобразованными в абсолютные `mask-composite`: как указано
Тип анимации	как каждое из свойств сокращенного свойства: `mask-image`: дискретная `mask-mode`: дискретная `mask-repeat`: дискретная `mask-position`: повторяющийся список `mask-clip`: дискретная `mask-origin`: дискретная `mask-size`: повторяющийся список `mask-composite`: дискретная
Создаёт контекст стекирования	да

Формальный синтаксис

mask = 
  <mask-layer>#  

<mask-layer> = 
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>                

<mask-reference> = 
  none           |
  <image>        |
  <mask-source>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}  

<geometry-box> = 
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box     

<compositing-operator> = 
  add        |
  subtract   |
  intersect  |
  exclude    

<masking-mode> = 
  alpha         |
  luminance     |
  match-source  

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<length-percentage> = 
  <length>      |
  <percentage>  

<shape-box> = 
  <visual-box>  |
  margin-box    

<url> = 
  <url()>  |
  <src()>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Примеры

Маскирование изображения

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

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

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

Спецификация
CSS Модуль маскирования уровня 1 # the-mask

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`mask`	120 1 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 1–120 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта.	120 79 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 79–120 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта. 12–79	53 2–53 Поддерживает только `mask: url(file.svg#mask_id)` или `mask: url(#mask_id)`, где URL ссылается на элемент SVG `<mask>`.	106 15 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 15–106 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта.	15.4 3.1 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 3.1–15.4 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта.	120 18 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 18–120 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта.	53 4–53 Поддерживает только `mask: url(file.svg#mask_id)` или `mask: url(#mask_id)`, где URL ссылается на элемент SVG `<mask>`.	80 14 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 14–80 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта.	15.4 2 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 2–15.4 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта.	25.0 1.0 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 1.0–25.0 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта.	120 2 Префиксное свойство можно использовать с SVG и HTML с немного отличающимся синтаксисом, что позволяет задать нестандартное свойство `-webkit-mask-attachment`. 2–120 Хотя свойство распознаётся, применённые к нему значения не имеют никакого эффекта.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask