Маска происхождения - CSS-хитрости

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

.element ( mask-image: url(star.svg); mask-origin: content-box; )

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

Это свойство работает так же, как background-originсвойство, за исключением того, что у него другое начальное значение и три дополнительных значения, которые применяются к элементам SVG.

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

Синтаксис

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Первоначальный значение: border-box
Применимо: ко всем элементам. В SVG это применяется к элементам контейнера, за исключением элемента, всех графических элементов и элемента.
Унаследовано: нет
Тип анимации: дискретная

Значения

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Определения значений

content-box: Положение относительно поля содержимого. Исходная точка mask-imageрасполагается в верхнем левом углу края содержимого.
padding-box: Положение относительно поля заполнения. Исходная точка изображения маски 0 0расположена в верхнем левом углу края отступа, 100% 100%это нижний правый угол.
border-box: Значение по умолчанию, которое задает положение относительно рамки.
margin-box: Положение относительно поля поля
fill-box: Положение относительно ограничивающей рамки объекта.
stroke-box: Положение относительно ограничительной рамки штриха
view-box: Использует ближайшее окно просмотра SVG в качестве справочного окна. Если viewBoxатрибут определен для SVG видового экрана создания элемента , то ссылка окна , расположенное в начале координат системы координат , установленной viewBoxатрибутом и размерностью опорной коробки устанавливаются на widthи heightзначение viewBoxатрибута.
initial: Применяет настройку свойства по умолчанию, то естьborder-box
inherit: Принимает mask-originзначение родителя.
unset: Удаляет ток mask-originиз элемента.

Использование нескольких значений

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Примечания

Для SVG элементов без соответствующей разметки CSS поля, значения content-box, padding-boxи border-boxвычислений в fill-box.
Для элементов с макетом коробкой CSS, связанной с ними значениями fill-box, stroke-boxи view-boxвычислениями к initialзначению mask-origin, которое является border-box.

Демо

Когда изображение слоя маски повторяется, первый экземпляр располагается в верхнем левом углу указанной области позиционирования, а затем он повторяется, начиная с этого места, в соответствии со значением mask-repeatсвойства.

Измените значение для mask-originв следующей демонстрации, чтобы лучше понять, что происходит: