Как сделать плавающий фон
Обновлено: 04.07.2024
Эта статья учебника будет посвяшена работе с плавающими элементами в CSS, в ней Вы узнаете, что такое плавающие элементы, как с помощью этих элементов производить верстку страниц, научитесь отменять правила обтекания элементов. Кроме того мы рассмотрим некоторые важные нюансы работы с плавающими элементами, а в заключении статьи, мы с Вами сверстаем документ с использованием плавающих элементов.
До настоящего момента, мы с Вами рассматривали примеры, в которых отображение содержимого начиналось по направлению от верхнего края к нижнему краю. За время изучения материала у нас накопилось достаточно знаний, чтобы сделать наши страницы более привлекательными, но нам еще предстоит узнать многие моменты, связанные с перемещением элементов на странице.
Рассмотрим пример, в котором нам поставили задачу компактно разместить на странице: заголовок второго уровня, два изображения и определенный текст.
За дело, сформируем разметку будущей страницы:
В данном примере мы разместили заголовок второго уровня по центру, а элементам задали ширину равную 30% от родительского элемента ( ) :
Результат нашего примера:
Рис.107 Размещение элементов на странице.
Хм, не кажется ли Вам, что на нашей странице слишком много пустого места и задачу о компактном размещении мы с Вами провалили? Может нам сместить текст ближе к изображению, но как этого можно добиться?
Один из способов заставить элемент переместиться в нужное нам место это использовать CSS свойство float, оно позволяет выровнять наш элемент на странице, как по левому, так и по правому краю. При этом элемент, к которому применяется это свойство, становится плавающим, а это приводит к тому, что содержимое, которое находится ниже плавающего элемента, смещается вверх и начинает обтекать плавающий элемент.
То, что надо, давайте внесем правки в наш документ:
И так, что мы добавили к нашему примеру:
- Горизонтально выровняли два наших абзаца по ширине (text-align: justify ).
- Создали класс .floatLeft, в котором указали, что элементы позиционируются (выравниваются) по левому краю, т.е. остальные элементы будут обтекать элемент по правому краю. Для того, чтобы текст не был вплотную к изображению установили внутренние отступы элемента равными 5px для всех сторон, за исключением левой: padding: 5px (Top) 5px (Right) 5px (Bottom) 0 (Left);
- Создали класс .floatRight, в котором указали, что элементы позиционируются (выравниваются) по правому краю, т.е. остальные элементы будут обтекать элемент по левому краю. Для того, чтобы текст не был вплотную к изображению установили внутренние отступы элемента равными 5px для всех сторон, за исключением правой: padding: 5px (Top) 0 (Right) 5px (Bottom) 5px (Left);
Результат нашей работы:
Рис. 108 Пример работы с плавающими элементами.
С помощью CSS свойства float Вы можете не только перемещать изображения к одной из сторон экрана, но и управлять размещением любых других элементов на странице: меню навигации, боковые панели, рекламные блоки и тому подобное. У данного свойства может быть всего три значения, два из которых мы рассмотрели выше ( left и right ), а третее значение none , считается значением по умолчанию для всех элементов (элемент не является плавающим и отображается там, где он расположен в потоке документа).
Важным моментом в понимании как работают плавающие элементы, является то, что если плавающий элемент находится внутри контейнера (другого элемента) и для контейнера заданы определенные значения ширины, то перемещение плавающего элемента будет осуществлено к указанному краю внутри этого контейнера, а не по отношению к окну браузера.
Давайте рассмотрим следующий пример:
Рис. 109 Позиционирование плавающего элемента внутри контейнера.
Где ты плаваешь, ты, что границ не видишь?
Механизм обтекания работает таким образом, что браузер окружает плавающий элемент только текстом, но не окружает его границами, либо фоном.
Допустим, у вас есть изображение, которое смещено к правому краю, содержащего блока. Содержимое этого блока как ему и положено обтекает это изображение, но, если у этого блока есть границы, либо фоновые значения, то они по умолчанию будут отображаться под этим изображением.
Давайте рассмотрим пример, в котором рассмотрим подобный случай:
В этом примере мы установили для элемента
границы и фоновые значения, внутри элемента разместили изображение, которое занимает 30% от его ширины и указали, что изображение является плавающим, сместив его к правому краю (float: right ).
Текстовое содержимое этого блока обтекает изображение с левой стороны, но при этом границы и фон блока отображаются под этим изображением:
Рис. 110 Поведение границ и фона с плавающим элементом.
В этом примере, мы создали дополнительный класс, в котором указали, что переполнение будет производиться в автоматическом режиме (overflow: auto ) и применили этот класс к нашему блоку. Если указать значение hidden (контент, который выходит за размеры будет невидимым) результат будет аналогичен значению auto . В результате это привело к тому, что фон и границы нашего блока отображаются после изображения, а не за ним, что нам и требовалось:
Рис. 111 Использование автоматического переполнения с плавающими элементами.
Ты сюда не обтекай, ты сюда обтекай (или отмена правил обтекания).
При работе с плавающими элементами вам рано или поздно потребуется, чтобы определенный элемент не взаимодействовал с плавающими элементами и существующие правила обтекания не распространялись на него.
Например, мы составляем какой-то список из блоков, которые содержат в себе изображение и поясняющий текст, при этом изображения являются плавающими и смещаются к правому краю (float: right ):
Обратите внимание, какая при этом у нас возникает проблема: второй текстовый блок с изображением начинает обтекать первый блок вместо того, чтобы быть ниже изображения:
Рис. 112 Пример обтекания плавающих элементов.
Чтобы решить нашу проблему, необходимо воспользоваться CSS свойством clear, которое определяет с какой стороны текущего элемента не допускаются плавающие элементы.
Это свойство имеет следующие значения:
| Значение | Описание |
|---|---|
| none | Разрешает наличие плавающих элементов с обоих сторон элемента. Значение по умолчанию. |
| left | Плавающие элементы не разрешены с левой стороны. |
| right | Плавающие элементы не разрешены с правой стороны. |
| both | Плавающие элементы не разрешены с обоих сторон элемента (как с левой, так и с правой стороны). |
Давайте рассмотрим применение этого свойства на нашем примере:
В данном примере мы запретили для блоков
плавающие элементы с правой стороны (отменили правила обтекания), что позволило нам выстроить блоки один за одним. Кроме того, для тематического разрыва мы указали для изображений внешние отступы снизу равными 15px .
Рис. 113 Пример использования свойства clear (отмена правил обтекания).
Верстка главной страницы сайта плавающими элементами
Чтобы закрепить полученные знания и рассмотреть еще некоторые приемы верстки, давайте рассмотрим следующий пример, который формирует простую разметку главной страницы для сайта:
И так по порядку, что мы сделали в этом примере:
Для шапки сайта (HTML тег ) мы установили следующие свойства:
Для подвала сайта (HTML тег ) мы установили следующие свойства:
Разместили дополнительную навигацию с правой стороны HTML элементом и установили для него следующие значения:
Предполагается, что информационное содержимое будет размещаться в элементах , для которых мы установили следующие значения:
Элементы (изображения) мы поместили в отдельный блок с классом .clearCats, для которого установили, что плавающие элементы не разрешены с левой стороны, тем самым данный блок не будет обтекать навигационную панель (отменяем правила обтекания).
Для самих изображений (HTML элемент ) мы установили следующие свойства:
Результат нашей работы представлен на изображении:
Рис. 114 Пример верстки сайта плавающими элементами.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
Практическое задание № 27.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
В этом руководстве мы в деталях изучим технологию создания респонсивного фонового изображения, которое будет занимать всю область просмотра в браузере при любом разрешении. И использовать мы будем CSS — свойство background-size . Без JavaScript :
ПРИМЕР
СКАЧАТЬ ИСХОДНИКИ
Примеры использования адаптивных фоновых изображений
На сегодняшний день очень популярны сайты, в которых фоновое изображение покрывает всю отображаемую область страницы.
Ниже приведены некоторые из таких веб-сайтов:
Основные понятия
Вот план нашей игры.
Используем свойство background-size для покрытия всей области просмотра
CSS -свойство background-size может принимать значение cover . Значение cover предписывает браузеру автоматически и пропорционально масштабировать фоновое изображение по длине и ширине таким образом, чтобы оно оставалось равным, или же больше, чем ширина/высота области просмотра.
Используем медиа-запрос при получении уменьшенной версии фонового изображения для мобильных устройств
Для уменьшения времени загрузки страницы на маленьких разрешениях экрана мы будем использовать медиа-запрос, чтобы получить уменьшенную версию фоновой картинки. Но это не обязательно и можно опустить. Данная технология прекрасно работает и без этого.
Но все же использовать уменьшенные версии фона для мобильных устройств идея неплохая, и я объясню почему.
Изображение, которое будет использовано в примере, имеет размер около 5500 на 3600px .
С этим разрешением мы имеем в плюсе то, что добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время, но в минусе имеем размер изображения. Это около 1,7 Мб.
Оставлять такой объем для загрузки одного лишь фонового изображения не очень хорошая идея в любом случае, а в случае с мобильными устройствами это очень плохая идея. К тому же, подобное разрешение просто излишне на экранах с маленьким разрешением ( об этом я расскажу подробнее позже ).
Ниже показано все, что понадобится из разметки:
Мы назначим фоновое изображение элементу body и таким образом добьемся полного покрытия фоном.
Однако эта техника сработает на любом блочном элементе ( таком как div или form ). В случае если ширина-высота вашего блочного контейнера подвижна, фоновое изображение будет также менять размер, чтобы занять всю область контейнера.
Мы объявляем свойства элемента body следующим образом:
Самое важное свойство-значение в этом списке:
Стоит заострить на нем внимание. Здесь и происходит чудо. Эта пара значения-свойства и дает указание браузеру на масштабирование фонового изображения в таких пропорциях, что высота-ширина будет оставаться равной или превышать высоту-ширину самого элемента. ( В нашем случае этот элемент — body .)
И тут возникает неприятная ситуация с парой свойство-значение. В случае, когда фоновое изображение будет иметь меньшее разрешение, чем размеры элемента body , а случиться это может либо при отображении страницы на экранах высокого разрешения, либо же когда у вас тонны контента на странице, — браузер будет растягивать изображение.
А как вы знаете, когда мы растягиваем изображение сверх его настоящего размера — мы теряем качество изображения ( другими словами появляется пикселизация ):
Когда изображение масштабируется в сторону увеличения родного размера — падает качество изображения .
Не забудьте об этом, когда будете подбирать фон. В демо-примере мы используем фото размером 5500 на 3600px для больших экранов, и потому в этом случае вряд ли произойдет нечто подобное.
Для того чтобы наш фон был выровнен по центру, мы объявили следующее:
Это установит масштабирующие оси в центр области просмотра.
Далее нам стоит разобраться с ситуацией, когда высота контента больше чем высота области просмотра. Когда подобное происходит — появляется скролл-бар.
Мы сделаем вот что. Установим свойство background-attachment в значение fixed , чтобы быть уверенными в том, что изображение останется на своем месте, даже если мы будем скролить страницу вниз:
Все что вам остается сделать — скачать демо-пример и немного поэкспериментировать со свойствами позиционирования ( background-attachment и background-position ) чтобы увидеть, как они влияют на поведение страницы и фона при прокрутке.
Следующие значения свойств говорят сами за себя.
Краткая запись CSS
Выше, для наглядности, я определял CSS — свойства в полном виде.
А так выглядит краткая запись:
Все, что вам остается сделать, это сменить значение url на путь к вашей картинке.
Опционально: медиа-запрос на получение уменьшенной версии фоновой картинки
Для экранов с меньшим разрешением нам понадобится Photoshop для пропорционального уменьшения разрешения картинки до 768 на 505px . Также я пропустил ее через Smush.it для уменьшения размера файла. Это позволило уменьшить размер с 1741 до 114 килобайт. Это уменьшило объем файла на 93%.
Не поймите меня неправильно, но 114 килобайт это все равно довольно много для использования в некоторых видах веб-дизайна. И мы будем загружать эти 114 килобайт только в случае необходимости, потому как, смотря на статистику, следует находить компромиссы между дизайном для настольных и мобильных устройств.
А вот и сам медиа-запрос:
Ключевая часть медиа-запроса заключена в свойстве max-width: 767px , которое, в нашем случае, означает, что если область просмотра браузера больше чем 767px — используется большое изображение.
Минус этого способа состоит в том, что, если вы изменяете размер окна браузера, с, допустим, 1200px до 640px ( или наоборот ), вы увидите мерцающий экран, пока меньшее или большее изображение будет подгружаться.
И вдобавок, из-за того, что некоторые мобильные устройства могут работать в большем разрешении — к примеру, iPhone 5 с Retina -дисплеем разрешением в 1136 на 640px , меньшее изображение будет выглядеть некрасиво.
Заключение
Весь использованный в этом руководстве код вы можете взять с GitHub .
Если и можно что-то добавить на счет этой техники, то это следующее.
Используйте вышеописанное с осторожностью, потому как файлы большого размера могут повлиять на пользовательское взаимодействие, в особенности когда пользователь не имеет достаточно быстрого соединения с интернетом. И это еще одна причина, по которой стоит устанавливать корректный цвет фона, чтобы посетитель вашего сайта смог видеть содержимое еще до того, как фоновое изображение будет полностью загружено.
Оптимизируйте ваши картинки для Веб, прежде чем использовать.
Лицензия: общественное достояние
Если вы хотите использовать код из этой статьи в своих целях — нет необходимости спрашивать, можно ли это делать; весь код размещен как общественное достояние на основе CC0 1.0 Universal .
Исходный код в репозитории GitHub repo не защищен какими либо авторскими правами. Вы можете использовать, продавать, модифицировать и распространять исходный код. Запрос на это вам не нужен.
Внесены изменения 28 марта 2021 года
А как установить обои с эффектом движения на смартфонах Samsung Galaxy?
Очень даже просто. Причём для этого не нужны какие-то специальные обои. Этот эффект можно реализовать и на ваших фотографиях, которые вы тоже можете установить в качестве обоев.
Далее мы опишем, как включить эффект параллакс при установке любых обоев на примере редакционного смартфона Samsung Galaxy A50 с ОС Android 9 Pie.
Инструкция по установке обоев с эффектом движения на смартфонах Samsung.
Мы решили в качестве примера показать как включить эффект движения на уже установленных обоях. В дальнейшем вы сможете включить этот эффект и при установке новых обоев следуя данной инструкции.
6. Теперь на Главном экране установлены обои зелёного тона с эффектом движения. При малейшем повороте смартфона в ваших руках вы заметите легкое движение иконок по экрану, как будто они начали перемещаться по воздуху над зелёным фоном экрана.
Очень красиво и не навязчиво.
Transition background
Например, изображение меняются при наведении на него курсора мыши ( :hover ).
Transition background-size
Также transition можно применить к размеру изображения ( background-size ).
Как дополнение, можно добаввить смену background-image :
Комментарии
Другие публикации
Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с.
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они.
Читайте также: