Свойство background-position-x
- это CSS - свойство, которое устанавливает начальную горизонтальную позицию для каждого фонового изображения. Эта позиция является относительной к позиции слоя, установленной с помощью свойства background-origin
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Значение этого свойства отменяется любой декларацией background
или коротким свойством background-position
применеными после его объявления.
Синтаксис
/* Keyword values */
background-position-x: left;
background-position-x: center;
background-position-x: right;
/* <percentage> values */
background-position-x: 25%;
/* <length> values */
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;
/* Side-relative values */
background-position-x: right 3px;
background-position-x: left 25%;
/* Multiple values */
background-position-x: 0px, center;
/* Global values */
background-position-x: inherit;
background-position-x: initial;
background-position-x: unset;
Свойство background-position-x
принимает одно или несколько значений, разделенных запятыми.
Значения
left
- Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.
center
- Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.
right
- Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.
<length>
- Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя. (Некоторые браузеры позволяют назначать правый край для смещения).
<percentage>
- Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.
Формальный синтаксис
[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#где
<length-percentage> = <length> | <percentage>
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Backgrounds and Borders Module Level 4 Определение 'background-position-x' в этой спецификации. |
Редакторский черновик | Initial specification of longhand sub-properties of background-position to match longstanding implementations. |
Начальное значение | left |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Проценты | относятся к ширине области позиционирования фона минус высота фонового изображения |
Обработка значения | Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово |
Animation type | discrete |
Совместимость с браузерами
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.