Основы позиционирования фона в CSS
HTML&CSS

Основы позиционирования фона в CSS

Оригинал: A Primer To Background Positioning In CSS, Sara Soueidan

Применение фоновых изображений к элементам — это, пожалуй, одна из наиболее часто используемых возможностей CSS, существует несколько свойств, позволяющих контролировать различные аспекты фоновых изображений.

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

Чтобы сохранить код и понятия в статье простыми, мы будем рассматривать в примерах одно фоновое изображение. Но то, что относится к одному изображению, может также применяться к нескольким.

Фоновое изображение позиционируется внутри области, называемой областью позиционирования фона элемента. Область позиционирования фона, как следует из названия, определяет область, к которой может позиционироваться фон, она имеет систему координат для управления позиционированием.

Прежде чем мы дальше углубимся в концепцию позиционирования, давайте сначала быстро взглянем на CSS box model и посмотрим, как она влияет на позиционирование фоновых изображений внутри элемента.

CSS box model

Элемент в CSS имеет три области: border box, padding box и content box. Border box включает в себя область внутри границы элемента и площадь под самой границей.

Padding box — это область, включающая в себя внутреннюю область элемента и область, задаваемую свойством padding, но не включает границы.

Content box — это внутренная область элемента, не включающая область отбивки и границы.

Есть еще четвертая область, называемая margin box, которая включает в себя элемент и внешнюю область, задаваемую свойством margin.

Когда вы задаете фон элемента — будь то изображение или цвет — фон заполняет область padding box. (Такое поведение может быть изменено с помощью свойства background-origin, мы еще к нему вернемся).

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

Система координат элемента

По умолчанию, благодаря природе блочной модели в CSS, каждый элемент имеет систему координат, установленную по его граням. Эта система кординат используется для позиционирования элемента относительно других элементов, а также для позиционирования дочерних элементов относительно текущего.

HTML-элементы имеет систему координат в CSS. SVG-элементы, напротив, не имеют похожей системы координат, поскольку не основываются на блочной модели.

Начало системы координат в CSS расположено в верхнем левом углу элемента.

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

Поскольку обрастью позиционирования фона по умолчанию является padding box, начало системы координат области позиционирования фона по умолчанию расположено в верхнем левом углу padding box.

Это означает, что когда вы применяете фоновое изображение к элементу, браузер расположит первую копию, а затем повторяющиеся элементы, начиная с верхнего левого угла padding box.

Например, предположим, что у вас есть фоновое изображение, примененное к элементу, и вы не установите повтор фонового изображения (только один экземпляр этого изображения будет применен). Начальное положение фонового изображения будет находиться в начале координат системы координат padding box. Т.е., верхний левый угол изображения будет расположен в верхнем левом углу padding box. (См. пример ниже).

Используя свойство background-position, о котором мы поговорим в этой статье, мы можем изменить положение изображения внутри этой системы координат.

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

Изменение области позиционирования фона и системы координат с помощью свойства background-origin

Свойство background-origin используется, чтобы изменить точку отсчета, относительно которой будет располагаться фоновое изображение.

Оно может принимать три значения: padding-box (значение по умолчанию), content-box и border-box.

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

Пример наглядно показывает разницу между различными значениями background-origin.

Для каждой области позиционирования фона, определенной с помощью background-origin, система координат «сдвигается» в угол этой области.

Далее, мы можем позиционировать фоновое изображение в этой системе координат с помощью свойства background-position.

Для простоты, мы не будем изменять область позиционирования фона по умолчанию в статье. Таким образом, во всех примерах фоновое изображение будет позиционироваться относительно padding box.

Позиционирование фонового изображения с помощью background-position

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

По умолчанию, положение задается в процентах. Вы можете задавать как процентное значени, так и абсолютное значение, которое определяет смещение изображения от одной из четырех граней области позиционирования (верхней, правой, нижней и левой).

В дополнение к абсолютным и относительным значениям, есть также пять ключевых слов, которые можно использовать: top, right, bottom, left и center.

Положение может описываться указанием одного значения смещения (с помощью ключевого слова, в процентах, или числовым значением), двух значений смещения (сочетание двух из трех возможных значений), или четырех значений смещения (с помощью ключевых слов или числовым значением). (Мы поговорим о них более подробно в следующих разделах).


background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;

Если указано только одно значение, второе считается равным center. Если вы указываете два значения, первое определяет смещение от левого края, т.е. горизонтальное положение, а второй является смещением вниз от верхнего края, то есть вертикальное положение.


background-position: 10% 50%; /* 10% of the width to the right, and 50% down from the top */
background-position: top; /* equivalent to `top center` */
background-position: 50px; /* equivalent to `50px center` */

Вы можете смешивать и сочетать значения, комбинируя числовые значения с процентами и/или ключевыми словами. Следует обратить внимание, что может использоваться пара ключевых слов или комбинация ключевое слово — процентное/числовое значение, но пара процентное/числовое — ключевое слово некорректна. Так center left — это корректное значение, а 50% left — нет. Но значение left 50% корректно. Первое значение соответствует горизонтальному смещению, а второе — вертикальному.

На самом деле, ключевые слова — это сокращения для конкретных процентных значений. А именно: top эквивалентно смещению 0% от верхней границы, bottom эквивалентно смещению 100% от верхней границы, left эквивалентно смещению 0% от левой границы, right эквивалентно смещению 100% от левой границы и center эквивалентно смещению 50% в любом направлении (по вертикали или по горизонтали).

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

Как работают абсолютные значения

При указании положения в абсолютных величинах, вы смещаете фоновое изображение относительно верхнего левого угла на заданное значение. Другими словами, фоновое изображение будет перемещено на заданное в background-position значение отновительно верхнего левого угла.

Лучший способ объяснить и понять — это визуализировать, поэтому ниже приведены два примера абсолютного позиционирования фонового изображения и то, как они интерпретируются браузером. В обоих примерах элемент имеет размер 100×80px.

Позиционирование фонового изображения с использованием абсолютных значений

Абсолютные значения могут быть отрицательными, в этом случае фоновое изображение будет смещено за границу элемента.

Пример, показывающий cмещение фонового изображения с помощью отрицательных значений

Попробуйте изменить значение background-position в примере ниже и посмотреть, как оно влияет на положение фонового изображения. Не забудьте попробовать отрицательные значения!

Как работают процентные значения

В отличие от абсолютных значений, которые смещают верхний левый угол фонового изображения на определенное расстояние, процентное значение X сдвигает точку X% ширины или высоты изображения в точку X% ширины или высоты контейнера.

К примеру, значение 0% 0% смещает точку 0% 0% изображения в точку 0% 0% области позиционирования фона. Значение 50% 70% сдвигает точку, расположенную на 50% ширины изображения правее левой границы и на 70% высоты ниже верхней границы в точку 50% 70% области позиционирования фона.

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

Позиционирование фонового изображения с помощью процентных значений

Так же, как и в случае с абсолютными значениями, вы можете указывать отрицательные процентные значения, при этом фоновое изображение будет смещено в противоположную сторону. Так, значение −10% −30% сдвинет изображение на 10% влево отновительно левого края и на 30% вверх.

Поиграться с процентными значениями можно в примере .

Позиционирование в двух предыдущих примерах происходит по отношению к верхней и левой границам элемента. Теперь давайте посмотрим, как мы можем объединить ключевые слова со смещением (в процентах или числовым), чтобы указать положение фонового изображения относительно любой из четырех границ элемента.

Смещение относительно любой границы

В примерах из предыдущих разделов мы видели, как используются смещения относительно верхней и левой границы элемента — это поведение по умолчанию для положения, задаваемого одним или двумя значениями.

Если вы объедините ключевые слова с числовыми значениями, вы можете задать смещение также относительно правой и нижней границы области позиционирования.

Для этого нужно сначала указать имя границы, относительно которой будет задаваться смещение, и затем указать значение смещения (абсолютное или в процентах).

Рассмотрим следующие примеры такого синтаксиса:


background-position: top 1em right 3em; /* positions the background image 1em down the top edge and 3em left of the right edge */

background-position: right 1em bottom 1em; /* positions the background image 1em above the bottom edge and 1em to the left of the right edge */

background-position: left 20px bottom 50px;

Если указаны только три значения из четырех — четвертое считается равным нулю.

Кое-что следует иметь в виду при использовании синтаксиса с четырьмя значенями: если указано три или четыре значения, то каждому числовому или процентному смещению должно предшествовать ключевое слово, которое определяет, относительно какой грани задано смещение. Например, background-position: bottom 10px right 20px означает смещение 10px вверх относительно нижней грани и 20px влево относительно правой грани. Если заданы три значения, смещение считается равным нулю. Если заданы два числовых значения и ключевое слово, такая позиция считается невалидной, а браузер использует значение по умолчанию 0% 0%.

Чтобы лучше разобраться с с этим, вы можете поиграться со значениями background-position в следующем примере. Начальное положение фонового изображения равно 0px от нижнего края и 2em от правого края.

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

Размер, повторение, обрезка и многое другое!

Помните, что вы можете применить несколько фоновых изображений к элементу. Для каждого фонового изображения (при условии, что они заданы как список разделенных запятыми изображений в качестве значения свойства background-position), вы можете указать соответствующее значение background-position; несколько позиций также должны быть разделенны запятыми.

В общем, есть девять CSS-свойств, которые контролируют расположение, размер и изображение фона, в том числе краткая запись свойства background. Каждое свойство позволяет сделать одну вещь, а в сочетании они дают нам отличный контроль над тем, как применяются фоновые изображения для любого элемента в HTML. Я надеюсь, что эта статья полностью раскрывает как работает позиционирование фонового изображения в CSS.

В дополнение к основным свойствам фона, существует также дополнительное свойство, которое позволяет накладывать эффекты на фоновые изображения, подобные эффектам, — это свойство background-blend-mode. Если вы заинтересуетесь наложением эффектов в CSS, вы можете прочитать больше об этом здесь .

Я надеюсь, статья была полезной. Спасибо за чтение.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться