Фоновая позиция - CSS-хитрости

Anonim

background-positionСвойство в CSS позволяет перемещать фоновое изображение (или градиент) вокруг внутри контейнера.

html ( background-position: 100px 5px; )

У него есть три разных типа значений:

  • Значения длины (например 100px 5px)
  • Проценты (например 100% 5%)
  • Ключевые слова (например top right)

Значения по умолчанию - 0 0. Это поместит ваше фоновое изображение в левый верхний угол контейнера.

Значения длины довольно просты: первое значение - горизонтальное положение, второе - вертикальное положение. Таким образом, 100px 5pxмы переместим изображение на 100 пикселей вправо и на пять пикселей вниз. Вы можете установить значения длины в px, emили любые другие значения длины CSS.

Проценты работают немного иначе. Снимите шляпы с математикой: перемещение фонового изображения на X% означает, что точка X% на изображении совмещается с точкой X% в контейнере. Например, 50%это означает, что он выровняет середину изображения с серединой контейнера. 100%означает, что он выровняет последний пиксель изображения с последним пикселем контейнера и так далее.

Ключевые слова - это просто ярлыки для процентов. Это легче запомнить и писать , top rightчем 100% 0, и именно поэтому ключевые слова вещь. Вот список всех пяти ключевых слов и их эквивалентных значений:

  • top: 0% по вертикали
  • right: 100% по горизонтали
  • bottom: 100% по вертикали
  • left: 0% по горизонтали
  • center: 50% по горизонтали, если горизонталь еще не определена. Если да, то это применяется вертикально.

Интересно отметить, что не имеет значения, какой порядок вы используете для ключевых слов: top centerтакой же, как center top. Однако вы можете сделать это, только если используете исключительно ключевые слова. center 10%не то же самое, что 10% center.

Демо

В этой демонстрации показаны примеры background-positionнабора с единицами длины, процентами и ключевыми словами.

См. Значения Pen background-position от CSS-Tricks (@ css-tricks) на CodePen.

Объявление ценностей

В background-positionсовременных браузерах можно указать до четырех значений (подробности см. В таблице поддержки браузера).

Если вы объявляете одно значение , это значение будет горизонтальным смещением. Браузер устанавливает вертикальное смещение на center.

Когда вы объявляете два значения , первое значение - это горизонтальное смещение, а второе - вертикальное.

Когда вы начинаете использовать три или четыре значения, все становится немного сложнее, но вы также получаете больше контроля над размещением фона.

В трех- или четырехзначном синтаксисе чередуются ключевые слова и единицы длины или процента. Вы можете использовать любое из значений ключевого слова, кроме centerтрех- или четырехзначного background-positionобъявления.

Когда вы указываете три значения , браузер вставляет «отсутствующее» четвертое значение как 0. Вот пример трех значений background-position:

#threevalues ( background-position: right 45px bottom; )

Это расположит фоновое изображение на 45 пикселей справа и на 0 пикселей снизу контейнера.

Вот пример четырехзначного числа background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Это поместит фоновое изображение на 45 пикселей справа и на 20 пикселей снизу контейнера.

Обратите внимание на порядок значений в приведенных выше примерах: ключевые слова, за которыми следуют единицы длины. Этому background-positionформату должны соответствовать трех- или четырехзначные числа , при этом ключевое слово должно предшествовать единице длины или процента.

Демо

Эта демонстрация включает в себя примеры одного значения, двух значений, трех значений и четырех значений background-position.

См. Синтаксис значения Pen background-position 1, 2, 3 и 4 от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • фоновое приложение
  • фоновый клип
  • фоновый цвет
  • фоновая картинка
  • фон-происхождение
  • фон-повтор
  • размер фона

Дополнительные ресурсы

  • background-position в спецификации CSS3
  • background-position в MDN
  • Смещение фоновых изображений

Поддержка браузера

Базовые ценности поддерживаются везде. Синтаксис с четырьмя значениями поддерживает такую ​​поддержку:

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
25 13 9 12 7

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7,0-7,1

Это тот же уровень поддержки, что background-position-xи у background-position-yсвойств и.