English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS свойство background-position устанавливает положение фона элементаbackground-imageпервоначальное положение (то есть начало). Используйте краткую записьФонСвойства обычно удобнее.
В таблице ниже приведены контекст использования и история версий этого свойства.
| Значение по умолчанию: | 0% 0% |
|---|---|
| Подходит для: | Все элементы |
| Ингеритация: | Нет |
| Анимация: | Да.См. также Анимационные свойства. |
| Версия: | CSS 1, 2, 3 |
| JavaScript грамматика: | object object.style.backgroundPosition="center" |
Грамматика этого свойства такая:
background-position: [ percentage | length | left | center | right ] 1 или 2 значения | initial | inherit
Ниже приведен пример того, как использовать свойство background-position.
p {
background-image: url("images/smiley.png");
background-position: 50% center;
}Проверьте, посмотрите на <</>Примечание:Если указан только один параметр, то предполагается, что второй параметр является центром. Если используются два параметра, и по крайней мере один из них не является ключевым словом, то первый параметр представляет горизонтальное положение, а второй параметр представляет вертикальное положение.
В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| bottom | Эквивалентно 100% вертикального положения. |
| center | Если не указано иное, то равно 50% вертикального положения,否则 указывается вертикальное положение 50%. |
| left | Эквивалентно 0% вертикального положения. |
| right | Эквивалентно 100% вертикального положения. |
| top | Вертикальное положение равно 0%. |
| length | Реальный размер в пикселях. Например, использование значения «10px 20px» означает, что верхний левый угол изображения находится в 10px справа от правого края элемента и в 20px снизу от верхнего края элемента. |
| percentage | Процент размера элемента. Например, использование значения «0% 0%» означает, что верхний левый угол изображения совпадает с верхним левым углом элемента. |
| initial | Установите этот параметр в его значение по умолчанию. |
| inherit | Если указано, то связанный элемент использует вычисленный значений свойства background-position родительского элемента. |
Совместимость браузеров для свойства background-position, все основные браузеры поддерживают это свойство.
|
Пожалуйста, смотрите следующие руководства:CSS фоновая графика,CSS3 фоновая графика.
Связанные свойства:background,background-attachment,background-color,background-clip,background-image,background-origin,background-repeat,background-size.