Свойство -webkit-mask-position задает позицию маски элемента относительно точки, указанной в -webkit-mask-origin.
В качестве маски может быть использовано любое изображение, причем прозрачные части маски делают элемент невидимым, непрозрачные — видимым, а полупрозрачные — полупрозрачными в зависимости от прозрачности маски.
Допустимые значения
- — задает расположение фоновой картинки в процентных значениях. Первое значение — значение по оси X (горизонтальное значение), второе — оси Y (вертикальное). Значение 0% 0% соответствует левому верхнему углу, 100% 100% — правому, нижнему
- — задает расположение фоновой картинки в процентных значениях по горизонтальной оси. Вертикальное значение будет равно 50%
- — задает расположение фоновой картинки в единицах измерения (например, в px — пикселях). Первое значение — значение по оси X (горизонтальное значение), второе — оси Y (вертикальное)
- — задает расположение фоновой картинки в единицах измерения по горизонтальной оси. Вертикальное значение будет равно 50%
- top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу) - inherit — наследует значение от родителя
| Значение по умолчанию | 0% 0% |
|---|---|
| Применимо | ко всем элементам |
| Наследование | нет |
| Поддерживается браузерами |
|
Пример
CSS
div {
background-color:#ccc;
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
-webkit-mask-position: bottom right;
}
По теме
- Вендорные префиксы. Что это?
- CSS свойство -webkit-mask
- CSS свойство -webkit-mask-attachment
- CSS свойство -webkit-mask-box-image
- CSS свойство -webkit-mask-clip
- CSS свойство -webkit-mask-composite
- CSS свойство -webkit-mask-image
- CSS свойство -webkit –mask-origin
- CSS свойство –webkit-mask-position-x
- CSS свойство –webkit-mask-position-y
- CSS свойство -webkit-mask-repeat
- CSS свойство -webkit-mask-size
Теги: маска изображения, вендорные свойства, Webkit (Safari, Chrome), css расширения, css extensions
Показать комментарии