4 Решения для полноэкранных фоновых изображений
Полноэкранные фоновые изображения не являются чем-то новым в веб-дизайне, но способы достижения этого эффекта изменились и улучшились по мере развития нашей отрасли. Кроме того, все движение адаптивного веб-дизайна уделяет еще больше внимания необходимости динамических веб-сайтов — использование динамически изменяющихся размеров фоновых изображений в дизайне вашего веб-сайта может стать отличным решением этой проблемы.
Давайте рассмотрим 4 различных решения, которые мы используем в качестве агентства веб-дизайна здесь, в Paper Leaf, для полноэкранных фоновых изображений, начиная с решения, основанного только на CSS, и переходя к нескольким различным решениям на базе jQuery. Все эти решения бесплатны, хорошо документированы и относительно просты в реализации!
Метод CSS3
Вам должно понравиться, когда вы можете решить проблему исключительно с помощью CSS. В спецификации CSS3 есть новое свойство под названием background-size.
Мы можем использовать это в наших интересах при создании веб-сайтов с полноэкранным фоновым изображением, установив его значение равным cover .
Это очень просто – вот пример кода:
body {
фон: url('images/body-bg.jpg') фиксированный центр без повторов;
-moz-background-size: обложка;
-webkit-background-size: обложка;
-o-background-size: обложка;
размер фона: обложка;
} Поддержка браузера: Это главный недостаток — Internet Explorer не распознает background-size ниже IE9. Хотя современные браузеры хороши.
jQuery BackStretch
jQuery BackStretch динамически и пропорционально изменяет размер фонового изображения с помощью jQuery; Кроме того, BackStretch извлекает большие фоновые изображения после загрузки страницы, что означает, что ваши пользователи не сидят в ожидании загрузки изображения.
Поддержка браузеров: современные браузеры и IE7+.
jQuery AnyStretch
jQuery AnyStretch (вот ссылка на git) был создан на основе ответвления BackStretch (отсюда и сходство названий) для решения конкретной проблемы, с которой Elliot J Stocks столкнулся при создании сайта Belong.
Проблема решить? Динамическое изменение размера фоновых изображений, которые не знали, где находится их собственный горизонтальный центр. Это основное различие между AnyStretch и BackStretch, и AnyStretch прекрасно решает эту проблему.
Поддержка браузеров: современные браузеры и IE7+.
Supersized Full Page Slider
Supersized предлагает что-то немного отличное от предыдущих решений: на самом деле это полноэкранный слайд-шоу плагин jQuery. Он существует уже некоторое время, широко используется и задокументирован, и это просто отличное решение jQuery. Основная версия также доступна для тех, кто просто хочет изменить размер фона без элемента слайд-шоу.
Поддержка браузеров: современных браузера и IE7+.
Эти решения не охватывают каждую возможную стрелку решения в колчане, который там есть, но они могут в значительной степени решить любую проблему с динамически изменяемым размером фоновых изображений, которые могут быть в Интернете.
Надеюсь, вы нашли их полезными!
Полноэкранное адаптивное фоновое изображение с помощью CSS
Как добавить полноэкранное адаптивное фоновое изображение с помощью CSS.
Гленн
2 мая 2014 г.
2014-05-02
В архиве
Вот наш CSS для полноэкранного адаптивного фонового изображения, в котором используется свойство CSS cover. Это означает, что фоновое изображение является полноэкранным, но также оно динамически настраивается/обрезается, чтобы не было искажения изображения: —
Базовая реализация CSS3
Здесь мы используем свойство Background Shorthand, и вы также можете добавить фон цвет в данном случае.
Если вы используете div, убедитесь, что он имеет ширину: 100%; и высота: 100%;. Вам также может понадобиться установить для body и html значение 100%
Реализация полноэкранного отзывчивого фонового слайд-шоу
Здесь мы предполагаем, что вы используете полноразмерное фоновое изображение в динамическом слайд-шоу/галерее, но если вы хотите использовать его для одного изображения, вы можете просто использовать CSS для «слайд-шоу li» и раскомментируйте /* */, чтобы вставить URL-адрес изображения.
Если вы хотите увидеть демонстрацию со сценарием jQuery Cycle, посетите наш живой клиентский сайт здесь.
Полноэкранное адаптивное фоновое изображение с демонстрацией CSS
Объявление Это может оказаться полезным.
ClickUp 3.0 — новый взгляд на производительность.
Новый этап эволюции командной производительности и совместной работы уже здесь. Откройте новое поколение производительности с бесконечными возможностями ClickUp 3.0.
Promo Save on Clickup 3.0
Ad Вы можете найти это полезным
Wavebox — это революционный браузер, который вы должны использовать прямо сейчас!
Работайте эффективнее с помощью приложений, удобных вкладок, входа с несколькими учетными записями, единого поиска, гибких рабочих пространств и многого другого…
Получите СКИДКА 35% со Slick Media Промокод Wavebox (нажмите на промо-ссылку внизу справа)
Промоакция Сэкономьте на Wavebox такие же старые стоковые изображения?
Перейдите на сайт JumpStory, чтобы получить неограниченный доступ к миллионам подлинных стоковых изображений, застрахованных по всему миру.
Получите скидку 25% на все планы JumpStory сегодня с эксклюзивной скидкой Slick Media JumpStory .
Промо Экономьте на JumpStory
Объявление Возможно, это будет вам полезно
Запишите свой экран, чтобы лучше общаться
Loom — это самый быстрый способ записать быстрое видео вашего экрана. Он прост в использовании и идеально подходит для гибридных рабочих мест. БЕСПЛАТНЫЕ и доступные платные планы.
Get Loom
Начните запись бесплатно
Promo Экономьте на Loom
Самый быстрый и простой конструктор электронной почты и целевых страниц.
BEE FREE и позволяют создавать великолепные, отзывчивые электронные письма за считанные минуты. BEE PRO и очень быстро создавайте электронные письма и целевые страницы. Код не требуется!
Получите BEE Free и BEE Pro
Начните проектирование
Promo Сэкономьте на BEE Free и BEE Pro
Получите самый популярный в мире менеджер паролей со скидкой 50%
1Password — самый простой способ хранения и поделитесь логинами , надежные пароли, кредитные карты и многое другое.