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

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

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

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

Другие примеры «Попробуйте сами» ниже.

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

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

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

Значение по умолчанию:	0% 0%
Унаследовано:	нет
Анимация:	нет. Читать об анимации
Версия:	CSS3
Синтаксис JavaScript:	объект .style.maskPosition="100px по центру"

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

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

Цифры, за которыми следует -webkit-, указывают на первую версию, которая работала с префиксом.

Property
mask-position	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

Синтаксис CSS

mask-position: value;

Значения свойств

Value	Description
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit