Как позиционировть фон с помощью CSS

Как позиционировть фон с помощью CSS

Проблема

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

как позиционировать фон на CSS

background-position: bottom right;  обычно не обеспечивает приятного глазу результата, так как изображение вплотную прижимается к сторонам контейнера

Для контейнеров фиксированного размера это возможно и средствами CSS 2.1, хотя решение получается не из простых: нужно подсчитать, каким должен быть сдвиг фонового изображения относительно верхнего левого угла, отталкиваясь от фиксированной длины и ширины контейнера и желаемого сдвига относительно правого нижнего угла. Однако для элементов переменного размера (вследствие того, что их содержимое может меняться) это невозможно. В итоге разработчикам приходилось задавать приблизительные значения,
например указывать местоположение фона процентным значением немного меньше 100%, скажем 95%. Определенно, в современном CSS должен найтись способ получше!

 Решение с использованием расширенного свойства background-position

В CSS  свойство  background-position было обновлено и теперь поддерживает задание сдвига относительно любого угла — для этого перед значениями сдвига необходимо указывать определенные ключевые слова. Например, если мы хотим, чтобы наше фоновое изображение было сдвинуто на 20px от правого края контейнера и на  10px от нижнего края, то мы можем использовать следующий код:

background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;

Результат вы можете видеть на рисунке ниже.

позиционирование фона CSS

 

Задание сдвига относительно разных сторон контейнера; фоновое изображение здесь обведено пунктирным контуром, чтобы было понятнее, как работает сдвиг

Читайте также  Как сделать фон в полоску

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

background :background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

как работает позиционирование фона

 

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

ПОПРОБУЙТЕ!
http://play.csssecrets.io/extended-bg-position

Решение с использованием background-origin

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

background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;

Результат показан на рисунке.

позиционирование нескольких фонов

Смещение фонового изображения на расстояние, равное значению забивки

Как вы видите, решение работает, но оно не соответствует принципам DRY: каждый раз при изменении ширины забивки нам необходимо обновлять это значение в трех разных местах!

К счастью, существует более простой способ добиться нужного эффекта, который к тому же автоматически учитывает значение забивки, без необходимости заново переопределять сдвиги. Скорее всего, за свою карьеру веб-разработчика вы немало раз упоминали в коде такие вещи, как background-position: top left; . Но задавались ли вы когда-нибудь вопросом, какой именно верхний левый угол имеется в виду под top left?

Как вы, вероятно, знаете, каждый элемент состоит из трех полей: поля рамки, поля забивки и поля содержимого. На верхний левый угол какого из этих полей ориентируется свойство  background-position ?
По умолчанию  background-position ссылается на поле забивки; это сделано для того, чтобы рамки не закрывали собой фоновые изображения. Следовательно,  top left — это по умолчанию верхний левый внешний угол поля забивки.

Читайте также  Как сделать рамку полупрозрачной

Однако, у нас появилось новое свойство, позволяющее изменить данное поведение:  background-origin. Его значение по умолчанию (вполне предсказуемо) равно  padding-box . Если изменить его на  content-box, как в следующем фрагменте кода, то ключевые слова для обозначения стороны и угла, которые мы используем с  background-position, будут ссылаться на край поля содержимого (по сути, это означает, что любые фоновые изображения будут сдвигаться относительно сторон/углов на величину забивки):
padding: 10px;
background: url(«code-pirate.svg») no-repeat #58a
bottom right; /* или 100% 100% */
background-origin: content-box;

позиционирование фонов на CSS

 

Визуально результат выглядит точно такой же, но код лучше соответствует принципам DRY. Помните также, что при необходимости эти две техники можно совмещать! Если вам нужно, чтобы смещение в целом соответствовало величине забивки, но фоновое изображение все же было слегка сдвинуто внутрь или наружу, то можете использовать  background-origin: content-box совместно с дополнительными значениями смещения, определенными посредством  background-position.
ПОПРОБУЙТЕ!
http://play.csssecrets.io/background-origin

Решение с использованием calc()

Давайте вспомним исходную формулировку задачи: мы хотим поместить наше фоновое изображение на расстоянии  10px от нижнего края и  20px от правого края.

Однако если мыслить в терминах смещения относительно верхнего левого угла, то нам требуется смещение на  100% — 20px по горизонтали и на  100% — 10px по вертикали. К счастью, функция calc() позволяет выполнять подобные вычисления и прекрасно поддерживает  background-position:

background: url(«code-pirate.svg») no-repeat;
background-position: calc(100% — 20px) calc(100% — 10px);

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

Читайте также  Сложные фоновые узоры

ПОПРОБУЙТЕ!
http://play.csssecrets.io/background-position-calc

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: