Позиция на маска - CSS-трикове

Anonim

В 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 се прилага за елементи на контейнера с изключение на елемента, всички графични елементи и елемента.
  • Наследен: не
  • Изчислена стойност: състояща се от: две ключови думи, представляващи произхода и две отмествания от този произход, всяка дадена като абсолютна дължина (ако е дадена а ), в противен случай като процент.
  • Тип анимация: повторяем списък

Стойности

А може да бъде определен по отношение на офсетните ключови думи ( 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 */
Две стойности

В случай на използване на двойни стойности, първата се приема като хоризонтална стойност, а втората определя вертикално положението на слоя за създаване.

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+
Източник: caniuse

Повече информация

  • CSS маскиращ модул ниво 1 (Чернова на редактора)
  • Изрязване и маскиране в CSS
  • Изрязване срещу маскиране: Кога да се използва всеки
  • # 185: Игра с CSS маски (видео)