Свойство mask-position
Свойство mask-position устанавливает начальную позицию маски относительно элемента.
Работает аналогично background-position, но применяется к маскам.
Синтаксис
селектор {
mask-position: <position>;
}
Значения
| Значение | Описание |
|---|---|
top left |
В левом верхнем углу (по умолчанию). |
center |
По центру элемента. |
50% 50% |
Аналогично center. |
right bottom |
В правом нижнем углу. |
100px 200px |
Конкретные координаты в пикселях. |
Пример . Центрирование маски
Маска-сердечко по центру изображения:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Пример . Левый верхний угол
Маска в левом верхнем углу:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Пример . Правый нижний угол
Маска в правом нижнем углу:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Пример . Toчные координаты
Маска позиционируется по точным координатам:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Пример . Процентное позиционирование
Позиционирование маски с помощью процентов:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Смотрите также
-
свойство
mask-size,
определяет размер маски -
свойство
mask-origin,
определяет точку отсчёта для позиционирования -
свойство
mask,
сокращение для всех свойств маскирования
