CSS свойство background-position
устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного background-origin
.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
Синтаксис
/* Ключевые значения */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <процент> значения */ background-position: 25% 75%; /* <отрезок> значения */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* Несколько изображений */ background-position: 0 0, center; /* Значения смещения края */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* Глобальные значения */ background-position: inherit; background-position: initial; background-position: unset;
Свойство background-position
указывается в виде одного или нескольких значений <position>
, разделенных запятыми.
Значения
<position>
<position>
. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считаетсяcenter
.-
Синтаксис 1-значения: значение может быть:
- Значение ключевого слова
center
, которое центрирует изображение. - Одно из значений ключевых слов
top
,left
,bottom
,right
. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края. <length>
или<percentage>
. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.
Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
- Одно из значений ключевых слов
top
,left
,bottom
,right
. Если здесь указаныleft
илиright
, то оно определяет X, а другое заданное значение определяет Y. Если даныtop
илиbottom
, то оно определяет Y, а другое значение определяет X. <length>
или<percentage>
. Если другое значение являетсяleft
илиright
, то оно определяет Y, относительно верхнего края. Если другое значениеtop
илиbottom
, то оно определяет X, относительно левого края. Если оба значения<length>
или<percentage>
, то первое определяет X, а второе Y.
Обратите внимание,что:
- Если одно значение
top
илиbottom
, то другое значение не может бытьtop
илиbottom
. - Если одно значение является
left
илиright
, то другое значение не может бытьleft
илиright
.
Это означает, например, что
top top
иleft right
являются недействительные. - Значение ключевого слова
Официальный синтаксис
<bg-position>#где
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
где
<length-percentage> = <length> | <percentage>
Примеры
Каждый из этих примеров использует свойство background
для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.
HTML
<div class="exampleone">Example One</div> <div class="exampletwo">Example Two</div> <div class="examplethree">Example Three</div>
CSS
/* Общий среди всех <div>-ов */ div { background-color: #FFEE99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* В этих примерах используется сокращенное свойство 'background' */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } .exampletwo { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat; } /* Несколько фоновых изображений: каждое изображение сопоставляется с соответствующей позицией, от первого указанного до последнего. */ .examplethree { background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, center; }
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Backgrounds and Borders Module Level 3 Определение 'background-position' в этой спецификации. |
Кандидат в рекомендации | Добавлена поддержка нескольких фонов и синтаксиса с четырьмя значениями. Изменяет определение процента, чтобы соответствовать реализациям. |
CSS Level 2 (Revision 1) Определение 'background-position' в этой спецификации. |
Рекомендация | Позволяет смешивать значения ключевых слов и <length> и <percentage> . |
CSS Level 1 Определение 'background-position' в этой спецификации. |
Рекомендация | Первоначальное определение. |
Начальное значение | 0% 0% |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
Наследуется | нет |
Проценты | относятся к размеру области позиционирования фона минус размер фонового изображения; размер - ширина горизонтальных смещений и высота вертикальных |
Отображение | визуальный |
Обработка значения | список, каждый элемент которого состоит из двух ключевых слов, представляющих начало координат и два смещения от этого начала, каждое из которых задаётся абсолютной длиной (если дано length ), иначе как проценты |
Animation type | repeatable list of simple list of length, percentage, or calc |
Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Совместимость браузеров
Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение.
Компьютеры | Мобильные | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-position | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 3.5 | Safari Полная поддержка 1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка Да |
Multiple backgrounds | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.6 | IE Полная поддержка 9 | Opera Полная поддержка 10.5 | Safari Полная поддержка 1.3 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка Да |
Four-value syntax (support for offsets from any edge) | Chrome Полная поддержка 25 | Edge Полная поддержка 12 | Firefox Полная поддержка 13 | IE Полная поддержка 9 | Opera Полная поддержка 10.5 | Safari Полная поддержка 7 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 25 | Firefox Android Полная поддержка 14 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 7 | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
Quantum CSS заметки
- В Gecko есть ошибка, означающая, что
background-position
не может бытьtransitioned
между двумя значениями, содержащими разные числа значений<position>
, для примераbackground-position: 10px 10px;
andbackground-position: 20px 20px, 30px 30px;
(смотрите баг 1390446). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.