background-position
CSS свойство background-position
устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного background-origin
.
Интерактивный пример
Синтаксис
/* Ключевые слова */
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
являются недействительные.
- Значение ключевого слова
Официальный синтаксис
background-position =
<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("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
background: url("startransparent.gif") #ffee99 3em 50% no-repeat;
}
/* Несколько фоновых изображений: каждое изображение сопоставляется
с соответствующей позицией, от первого указанного до последнего. */
.examplethree {
background-image: url("startransparent.gif"), url("catfront.png");
background-position:
0px 0px,
center;
}
Результат
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-position |
Совместимость с браузерами
BCD tables only load in the browser
Quantum CSS заметки
- В Gecko есть ошибка, означающая, что
background-position
не может бытьtransitioned
между двумя значениями, содержащими разные числа значений<position>
, для примераbackground-position: 10px 10px;
andbackground-position: 20px 20px, 30px 30px;
(смотрите Firefox bug 1390446). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.