У CSS mask-positionвластивість визначає початкове положення зображення шару маски щодо області положення маски. Це працює як background-positionвласність.
.element ( mask-image: url("star.svg"); mask-position: 20px center; )Маскування дозволяє відображати вибрані частини елемента, приховуючи решту. У наступній демонстрації ви можете змінити положення зображення шару маски:
Синтаксис
mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )- Початкове значення:
0% 0% - Застосовується до: усіх елементів. У SVG це застосовується до елементів контейнера, за винятком
елемента, усіх графічних елементів таелемента. - Успадковано: ні
- Обчислюване значення: складається з: двох ключових слів, що представляють початок, та двох зсувів від цього початку, кожне з яких подано як абсолютну довжину (якщо дано a
), інакше як відсоток. - Тип анімації: повторюваний список
Цінності
Може бути визначена в термінах зміщення ключових слів ( top, left, bottom, right, і center), відсотки і значення довжини щодо краю елемента, схожого на CSS background-positionвластивість.
/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center;
/* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh;
/* Percentage values */ mask-position: 25% 50%;
/* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;Визначення цінностей
: Будь-яка допустима довжина CSS (такі якpx,em,remі%, серед інших) , які будуть вказувати , наскільки далеко край маски зображення з відповідного краю елемента.: Визначає положення зображення шару маски як відсоткове значення відносно площі позиціонування маски мінус розмір зображення маски.top: Еквівалентно 0% для вертикального положення.right: Еквівалентно 100% для горизонтального положення.bottom: Еквівалентно 100% для вертикального положення.left: Еквівалентно 0% для горизонтального положення.center: Еквівалентно 50% для горизонтального положення, якщо горизонтальне положення не вказано інакше, або 50% для вертикального положення, якщо воно вказане.initial: Застосовує значення властивості за замовчуванням, яке становить 0% 0%.inherit: Приймаєmask-positionзначення батька.unset: Видаляє струмmask-positionз елемента.
Використання кількох значень
Ця властивість може приймати розділений комами список значень для позицій маски, і кожне значення застосовується до відповідного зображення шару маски, зазначеного у mask-imageвластивості. У наступному прикладі перше значення вказує позицію першого зображення, друге значення визначає положення другого зображення тощо.
.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )Різний синтаксис
mask-position може приймати одне, два, три або чотири значення, щоб вказати положення шару маски по горизонталі та вертикалі.
Одиночне значення
Якщо встановлено одне значення , це приймається як горизонтальне значення, а вертикальне значення приймається за таке center.
mask-position: 100px; /* 100px center */Два значення
У разі використання парних значень, перше приймається за горизонтальне значення, а друге визначає положення шару make вертикально.
mask-position: 10% 50%; /* x=10%, Y=50% */Якщо обидва значення є ключовими словами, то порядок ключових слів не має значення:
mask-position: top left; /* = left top */Але коли ми маємо комбінацію ключового слова та довжини чи відсотка, порядок має значення, і перше значення завжди відповідає горизонтальному зміщенню. Тому:
mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */Три значення
Якщо вказано три значення, відсутнє зміщення вважається рівним нулю:
mask-position: left 100px bottom; /* left=100px bottom=0 */Чотири значення
Чотиризначний синтаксис дозволяє вказати, на яких сторонах елемента ви позиціонуєте маску (значення 1 і 3), а потім відстань від цих сторін (значення 2 і 4).
Отже, якщо ви хочете розташувати маску 100px знизу елемента та 200px праворуч, ви можете зробити наступне:
mask-position: bottom 100px right 200px;Анімаційні маски
Можна анімувати положення маски за mask-sizeдопомогою анімації ключових кадрів та переходу CSS, як показано нижче:
.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; )
.element:hover ( mask-position: right 10px bottom 10px; )У цій наступній демонстрації ми анімуємо положення шару маски за допомогою анімації ключових кадрів:
Демо
Змініть значення для mask-positionнаступної демонстрації:
Підтримка браузера
| IE | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|
| Ні | 18+ | 53+ | 4+ | 3,2+ | 15+ |
| Android Chrome | Android Firefox | Браузер Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 2.1+ | 3,2+ | 59+ |
Більше інформації
- Модуль маскування CSS рівень 1 (проект редактора)
- Відсікання та маскування в CSS
- Відсікання проти маскування: коли використовувати кожен
- # 185: Гра з масками CSS (відео)