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

Оцените материал
(0 голосов)

Проблема

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

Как позиционировать фрн на CSSbackground-position: bottom right;  обычно не обеспечивает приятного глазу результата, так как изображение вgлотную gрижимается к сторонам контеqнера

Для контейнеров фиксированного размера это возможно и средствами 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;

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

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

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

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;

Визуально результат выглядит точно такой же, но код лучше соответствует принципам 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

Десерт на сегодня - видео про медведя Диму

Прочитано 494 раз Последнее изменение Воскресенье, 22 января 2017 13:53
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+