CSS свойство mask-position
- Предыдущая страница mask-origin
- Следующая страница mask-repeat
Определение и использование
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;
Значение атрибута
Значение | Описание |
---|---|
|
Если указан только один ключевое слово, другой параметр будет равен "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
- Предыдущая страница mask-origin
- Следующая страница mask-repeat