CSS свойство mask-position

Определение и использование

mask-position Этот параметр устанавливает начальное положение изображения маски (относительно области позиции маски).

Совет:По умолчанию, изображение маски размещается в левом верхнем углу элемента и повторяется в вертикальном и горизонтальном направлениях.

Пример

Пример 1

Установите положение изображения маски по центру:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

Попробуйте сами

Пример 2

Установите положение изображения маски в правом нижнем углу:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

Попробуйте сами

Синтаксис CSS

mask-position: value;

Значение атрибута

Значение Описание
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
Если указан только один ключевое слово, другой параметр будет равен "center".
x% y%

The first value is the horizontal position, the second value is the vertical position.

Upper left corner is 0% 0%. Lower right corner is 100% 100%.

Если указан только один параметр, другой параметр будет равен 50%.

Значение по умолчанию: 0% 0%

xpos ypos

The first value is the horizontal position, the second value is the vertical position.

Upper left corner is 0 0. Units can be pixels (0px 0px) or any other CSS unit.

Если указан только один параметр, другой параметр будет равен 50%.

Можется смешивать % и позиции.

initial Этот атрибут устанавливается в значение по умолчанию. См. также: initial.
inherit Этот атрибут наследуется от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: 0% 0%
Инheritability: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: Модуль маскирования CSS уровня 1
Язык программирования JavaScript: object.style.maskPosition="100px center"

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Сafari Опера
120 120 53 15.4 106

Связанные страницы

Урок:CSS маски

См. также:CSS свойство mask

См. также:CSS свойство mask-clip

См. также:CSS свойство mask-composite

См. также:CSS свойство mask-image

См. также:CSS свойство mask-mode

См. также:CSS свойство mask-origin

См. также:CSS свойство mask-repeat

См. также:CSS свойство mask-size

См. также:CSS свойство mask-type