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