CSS-свойство `mask-origin`

CSS-свойство mask-origin CSS задаёт начало координат маски. Это свойство определяет область позиционирования маски — область, в пределах которой размещается изображение маски. Маски HTML-элементов могут быть ограничены граничной рамкой содержимого, полем или областью содержимого, а маски SVG-элементов (у которых нет соответствующих блоков CSS-макета) могут быть ограничены областью заливки, обводки или областью просмотра. Для элементов, отрисовываемых в виде нескольких блоков, например текста в <span>, занимающего несколько строк, свойство mask-origin определяет, к каким блокам применяется свойство box-decoration-break для определения области позиционирования маски.

Синтаксис

/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

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

Значения

Свойство mask-origin принимает разделённый запятыми список ключевых слов <coord-box>, в который входят:

content-box

Положение определяется относительно области содержимого.

padding-box

Положение определяется относительно поля.

border-box

Положение определяется относительно граничной рамки.

fill-box

Положение определяется относительно ограничивающей рамки объекта.

stroke-box

Положение определяется относительно ограничивающей рамки обводки.

view-box

В качестве опорной рамки используется ближайшая область просмотра SVG. Если для элемента, создающего область просмотра SVG, задан атрибут viewBox, опорная рамка располагается в начале системы координат, заданной атрибутом viewBox, а её размеры устанавливаются равными значениям ширины и высоты атрибута viewBox.

Существуют три нестандартных значения, являющихся сокращёнными вариантами стандартных значений <coord-box>: content — псевдоним content-box, padding — псевдоним padding-box, а border — псевдоним border-box.

Описание

Свойство mask-origin очень похоже на свойство background-origin, но набор его значений и начальное значение отличаются. Начальное значение зависит от наличия связанного блока CSS-макета: если он есть, значением по умолчанию будет border-box. Для сравнения, значение по умолчанию для background-origin — padding-box.

Для SVG-элементов без связанного блока CSS-макета значения content-box, padding-box и border-box (значение по умолчанию) вычисляются как fill-box, то есть положение определяется относительно ограничивающей рамки объекта. Для HTML-элементов, если задано одно из значений, связанных с SVG, — fill-box, stroke-box или view-box, оно вычисляется как border-box.

К элементу можно применить несколько слоёв маски. Количество слоёв определяется количеством разделённых запятыми значений свойства mask-image (даже если одно или несколько из этих значений — none). Каждое значение mask-origin в разделённом запятыми списке сопоставляется со значением mask-image из разделённого запятыми списка в том же порядке.

Если количество значений в двух свойствах различается, лишние значения mask-origin не используются, когда у mask-origin значений больше, чем у mask-image. Если у mask-origin значений меньше, чем у mask-image, значения mask-origin повторяются.

Для элементов, отрисовываемых в виде одного блока, это свойство задаёт область позиционирования маски — или исходное положение — изображения, указанного свойством mask-image.

Для элементов, отрисовываемых в виде нескольких блоков, например встроенных блоков, занимающих несколько строк, свойство mask-origin определяет, к каким блокам применяется свойство box-decoration-break для определения области позиционирования маски.

Свойство mask-origin может привести к обрезке изображения слоя маски. Например, если свойству mask-clip задано значение padding-box, свойству mask-origin — значение border-box, а свойству mask-position — значение top left края, то изображение слоя маски будет обрезано по верхнему левому краю, если у элемента есть рамка.

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

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

mask-origin = 
  <coord-box>#

<coord-box> = 
  <paint-box> |
  view-box

<paint-box> = 
  <visual-box> |
  fill-box |
  stroke-box

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

Примеры

Сравнение области содержимого, поля и граничной рамки

В этом примере показано базовое использование свойства mask-origin с тремя разными значениями.

HTML

Мы добавляем четыре элемента <section>, каждый из которых содержит один элемент <div>.

<section class="content">
  <div></div>
</section>
<section class="padding">
  <div></div>
</section>
<section class="border">
  <div></div>
</section>
<section class="comparison">
  <div></div>
</section>

CSS

Для каждого элемента <div> мы задаём border, padding и margin. Они создают опорные точки для начала координат изображения маски. Краткая запись border включает border-color. Мы также задаём background-color. Они создают зелёный фон и синюю рамку для маски. Наконец, каждому элементу <div> задаётся mask-image.

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
}
section {
  border: 1px solid black;
}

Каждому элементу <div> задаём своё значение mask-origin.

.content div {
  mask-origin: content-box;
}

.padding div {
  mask-origin: padding-box;
}

.border div {
  mask-origin: border-box;
}

.comparison div {
  mask-image: none;
}

Кроме того, мы добавляем текст внутрь каждого элемента <section>, чтобы указать начало координат маски для каждого контейнера <div>.

section::before {
  content: attr(class);
  display: block;
  text-align: center;
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

Результат

Обратите внимание на различия между тремя значениями. В первых трёх блоках маска начинается соответственно:

• У внешнего края рамки.
• У внутреннего края рамки, совпадающего с внешним краем поля.
• У внутреннего края поля, совпадающего с внешним краем области содержимого.

Для четвёртого блока значение mask-image не задано: это эталонное изображение, которое помогает наглядно увидеть границы областей содержимого и поля.

Несколько значений

В этом примере показано, как задать разные значения mask-origin для разных mask-image, применённых к одному элементу.

HTML

Мы добавляем один элемент <div>.

<div></div>

CSS

Вместо одного мы задаём три изображения маски, каждое с отдельным значением mask-position. Также мы отключаем повторение изображений маски.

div {
  width: 120px;
  height: 120px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image:
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg"),
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg"),
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
  mask-position:
    top left,
    top right,
    bottom center;
  mask-repeat: no-repeat;
  mask-origin: content-box, border-box;
}

Результаты

Задано три значения mask-image, но только два значения mask-origin. Это означает, что значения mask-origin повторяются, как если бы мы задали mask-origin: content-box, padding-box, content-box;. Звезда border-box — единственная маска, перекрывающая рамку; это звезда вверху справа.

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

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

См. также

• background-origin
• mask-image
• mask-position
• mask-repeat
• mask-size
• Краткая запись mask
• Введение в маскирование CSS
• Свойства mask CSS
• Объявление нескольких масок
• Модуль маскирования CSS