Маска-позиция - 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 это применяется к элементам контейнера, за исключением элемента, всех графических элементов и элемента.
  • Унаследовано: нет
  • Вычисленное значение: состоит из: двух ключевых слов, представляющих начало координат, и двух смещений от этого источника, каждое из которых задано как абсолютная длина (если задано 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 */
Два значения

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

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).

Итак, если вы хотите расположить маску на 100 пикселей снизу элемента и на 200 пикселей справа, вы можете сделать следующее:

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 Край Fire Fox Хром Сафари Опера
Нет 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Источник: caniuse

Дополнительная информация

  • CSS Masking Module Level 1 (Проект редактора)
  • Обрезка и маскирование в CSS
  • Обрезка против маскирования: когда использовать каждое
  • # 185: Игра с масками CSS (видео)