background-position-x ⚡️ HTML и CSS с примерами кода
Свойство background-position-x задаёт положение фонового изображения внутри элемента по горизонтали.
Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.
Демо
Фон- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
Синтаксис
/* 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 и др. относительно левого края элемента.
Эквивалент записи 0 или 0%.Значение по-умолчанию:
background-position-x: left;
Применяется ко всем элементам
Спецификации
- CSS Backgrounds and Borders Module Level 4
Поддержка браузерами
Can I Use background-position-x-y? Data on support for the background-position-x-y feature across the major browsers from caniuse.
Смещение краёв фона:
Can I Use css-background-offsets? Data on support for the css-background-offsets feature across the major browsers from caniuse.com.
Описание и примеры
<!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></div>
</body>
</html>
В данном примере при наведении курсора мыши на рисунок, фоновая картинка смещается по горизонтали, показывая цветной рисунок вместо чёрно-белого.
Свойство CSS: background-position | HTML Собака
Позиция (или начальная позиция, если мозаично) фонового изображения.
background-position: top right в сочетании с background-repeat: no-repeat . Фоновая позиция также может быть указана как часть сокращенного свойства
Возможные значения
Может содержать одно или, чаще, два значения.
| Значение | Описание | Пример |
|---|---|---|
| [длина] | Точка левой или верхней стороны изображения, измеренная от левой или верхней части области фона. | 50px |
| [проценты] | Измеряется от левого или верхнего края фоновой области, где 0% прижимает изображение к начальной точке, а 100% к прижатию вверх конечная точка полной ширины или высоты области фона. | 25% |
центр | Ключевое слово. Эквивалент | |
верхний | Ключевое слово. Эквивалент 50% 0% , если используется сам по себе. | |
справа | Ключевое слово. Эквивалент 100% 50% , если используется сам по себе. | |
внизу | Ключевое слово. Эквивалент 50% 100% , если используется отдельно. | |
слева | Ключевое слово. Эквивалент 0% 50% | |
| [значение] [значение] | Любая разумная комбинация двух длин/процентов или двух ключевых слов. Если значения представляют собой длины или проценты, первое — это положение по горизонтали, а второе — положение по вертикали. | 200px 100px |
| [значение] [значение] [значение] | Смещение.
| вверху 10em справа |
| [значение] [значение] [значение] [значение] | Смещение.
| верх 10em справа 5em |
[значения] , [значения] | Для нескольких фонов. Наборы значений, разделенные запятыми, соответствуют нескольким изображениям, разделенным запятыми, с | вверху справа, 11px 22px |
наследование | ||
начальный | ||
не установлен | ||
Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.
Пример
.dimple {фоновая позиция: справа внизу; }
/* Помещает фоновое изображение в правый нижний угол окна. */
.bump {фоновая позиция: верхние 30 пикселей слева 2 пикселя; }
/* Фон расположен на 30 пикселей вниз сверху и на 2 пикселя слева. */
Поддержка браузера
Поддерживается всеми современными браузерами.
Свойство CSS background-position-x — использование, синтаксис, примеры
❮ Пред. Следующий ❯
Свойство background-position-x устанавливает горизонтальное положение для каждого фона. Можно указать одно или несколько значений, разделенных запятыми.
По умолчанию фоновое изображение располагается в верхнем левом углу элемента и повторяется как по горизонтали, так и по вертикали.
Допустимы отрицательные значения.
background-position-x: слева | центр | право | длина | процент | начальная | наследовать;
Пример свойства background-position-x:
<голова>
Название документа
<стиль>
тело {
background: #ccc url("/build/images/w3docs-logo-black.
png") Repeat-y;
фоновая позиция-х: 70%;
}
<тело>
Пример свойства Background-position-x
Попробуй сам »
Результат
Пример свойства background-position-x со значением «center»:
<голова>
Название документа
<стиль>
тело {
background: #ccc url("/build/images/w3docs-logo-black.png") repeat-x;
фоновая позиция-х: центр;
}
<тело>
Пример свойства Background-position-x
Попробуй сам »
Пример свойства background-position-x со значением «left»:
<голова>
Название документа
<стиль>
тело {
background: #ccc url("/build/images/w3docs-logo-black.png") Repeat-y;
фоновая позиция-х: слева;
}
<тело>
Пример свойства Background-position-x
Попробуй сам »
Пример свойства background-position-x со значением «длина»:
<голова>Название документа <стиль> тело { background: #ccc url("/build/images/w3docs-logo-black.
