background-position-x¶
Свойство background-position-x
задаёт положение фонового изображения внутри элемента по горизонтали.
Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.
Фон
Синтаксис¶
/* 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;
Значения¶
left
- Выравнивает фон по левому краю. Эквивалент записи 0 или 0%.
center
- Выравнивает фон по центру горизонтали. Эквивалент записи 50%.
right
- Выравнивает фон по правому краю. Эквивалент записи 100%.
<проценты>
- Задаёт положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента.
<размер>
- Задаёт положение фона в любых доступных для CSS единицах — пиксели (px), сантиметры (cm), em и др. относительно левого края элемента.
Значение по-умолчанию:
background-position-x: left;
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Смещение краёв фона:
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>background-position-x</title>
<style>
.clock {
background: url('/example/image/clock-sprite.png')
no-repeat;
width: 128px;
height: 128px;
}
.clock:hover {
background-position-x: 100%;
}
</style>
</head>
<body>
<div class="clock"></div>
</body>
</html>
В данном примере при наведении курсора мыши на рисунок, фоновая картинка смещается по горизонтали, показывая цветной рисунок вместо чёрно-белого.