background-position-x
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2016 г..
* Some parts of this feature may have varying levels of support.
Свойство background-position-x - это CSS - свойство, которое устанавливает начальную горизонтальную позицию для каждого фонового изображения. Эта позиция является относительной к позиции слоя, установленной с помощью свойства background-origin.
Интерактивный пример
background-position-x: left;
background-position-x: center;
background-position-x: 25%;
background-position-x: 2rem;
background-position-x: right 32px;
<section class="display-block" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
background-color: navajowhite;
background-image: url("/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
height: 100%;
}
Значение этого свойства отменяется любой декларацией 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% горизонтально центрирует фоновое изображение.
Формальный синтаксис
background-position-x =
[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#
<length-percentage> =
<length> |
<percentage>
Спецификации
| Specification |
|---|
| CSS Backgrounds Module Level 4 # background-position-longhands |
| Начальное значение | 0% |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line. |
| Наследуется | нет |
| Проценты | относятся к ширине области позиционирования фона минус высота фонового изображения |
| Обработка значения | Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово |
| Animation type | повторяющийся список из |
Совместимость с браузерами
Loading…