Маска-произход - 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в следващата демонстрация, за да получите по-добра представа за случващото се: