Как сделать фон на сайте html картинкой: Как сделать фон в html: порядок действий

руководство по отложенной загрузке изображений — Дизайн на vc.ru

Перевод материала сооснователя сервиса для оптимизации изображений ImageKit Рахула Нанвани.

57 078 просмотров

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

Но изображения часто много весят, и это в первую очередь влияет на размер страницы. Согласно данным сайта HTTP Archive, средний вес страницы на компьютере составляет 1511 КБ. Изображения занимают почти 650 КБ, что примерно 45% от общего числа.

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

Основные возможности — вкратце

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

Что такое отложенная загрузка

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

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

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

Инструменты

Основная идея проста — отложить загрузку всего, что не нужно пользователю прямо сейчас.

К любому изображению, которое пользователь не видит изначально, можно применить этот метод.

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

С помощью расширения Lighthouse для браузера Google Chrome можно узнать, какие изображения подходят для отложенной загрузки и сколько трафика можно сэкономить. В расширении есть раздел, посвящённый закадровым изображениям.

Также можно использовать анализатор сайтов от ImageKit, чтобы определить, использует сайт отложенную загрузку или нет.

Способы реализации

Изображения на странице можно загружать двумя способами — с помощью тега <img> или с помощью CSS-свойства «background», которое позволяет установить одновременно несколько характеристик фона. Сначала рассмотрим более распространённый тег <img>, а затем перейдём к фоновым изображениям CSS.

Тег <img>

Отложенную загрузку изображений можно разделить на два этапа.

Шаг первый — предотвратить изначальную загрузку изображения. Для изображений, загруженных с помощью тега <img />, браузер использует атрибут тега «src» для запуска загрузки изображения. Не имеет значения, первое это или тысячное изображение в HTML и закадровое ли оно. Если браузер получит атрибут «src», это вызовет загрузку изображения.

Чтобы загрузить изображение через отложенную загрузку, нужно поместить URL-адрес изображения в атрибут «src». Допустим, указываем URL-адрес изображения в атрибуте «data-src» тега «image». Теперь, когда «src» пуст, браузер не начинает загрузку изображения.

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

Загрузка изображений с помощью событий JavaScript

В этом методе используем отслеживание событий прокрутки (scroll), изменения размера (resize), смены ориентации (orientationChange) в браузере.

Когда происходит одно из этих событий, находим все изображения на странице, которые ещё не загружены. Проверяем, какие из них теперь находятся в окне просмотра. Это можно определить с помощью свойств «offset top», «scroll top» и «window height».

Если изображение вошло в окно просмотра, берём URL из атрибута «data-src» и помещаем его в атрибут «src». Это запускает загрузку изображения. Также удаляем класс «lazy», определяющий изображения, которые будут загружаться позже. После загрузки всех изображений удаляем инструменты для отслеживания событий.

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

See the Pen Lazy loading images using event handlers — example code by ImageKit. io (@imagekit_io) on CodePen.

Первые три изображения в примере загружаются заранее. URL-адрес присутствует непосредственно в атрибуте «src» вместо атрибута «data-src». Это необходимо для хорошего пользовательского опыта. Поскольку эти изображения находятся в верхней части страницы, их следует сделать видимыми как можно скорее. Мы не должны ждать события или выполнения JavaScript, чтобы загрузить их.

Загрузка изображений с помощью Intersection Observer API

Intersection Observer API — относительно новый API в браузерах. Он определяет, когда элемент входит в окно просмотра, и начинает действовать. В предыдущем методе приходилось связывать события, учитывать производительность и подсчитывать время появления элемента в окне просмотра.

Intersection Observer API делает процесс проще, помогает избежать вычислений и обеспечивает хорошую производительность.

Ниже — пример использования Intersection Observer API для отложенной загрузки изображений.

Как только API обнаруживает, что элемент вошёл в окно просмотра, используя свойство «isIntersecting», выбираем URL из атрибута «data-src» и перемещаем его в атрибут «src», чтобы запустить отложенную загрузку.

Как только это будет сделано, удаляем класс «lazy» из изображения, а также удаляем оттуда обсервер.

See the Pen Lazy loading images using IntersectionObserver — example code by ImageKit.io (@imagekit_io) on CodePen.

Если вы сравните время загрузки изображения двух методов — с отслеживанием событий и Intersection Observer API, — то обнаружите, что с помощью Intersection Observer API загрузка изображения запускается гораздо быстрее, и сайт уже не смотрится «вялым» при скроллинге.

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

Однако, как и всё новое, поддержка Intersection Observer API доступна не во всех браузерах. Таким образом, приходится возвращаться к методу отслеживания событий в браузерах, где Intersection Observer API не поддерживается. Учли этот момент в приведённом выше примере.

Отложенная загрузка фоновых изображений CSS

После тегов <img /> фоновые изображения являются наиболее распространённым способом загрузки изображений для страниц. Для тегов <img /> в браузере простой подход — если URL-адрес изображения доступен, то можно его загрузить.

С фоновыми изображениями CSS не всё так просто. Чтобы загрузить фоновые изображения CSS, браузер должен создать дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, то браузер не загружает фоновое изображение. Если применяется — загружает.

Поначалу это может показаться сложным, но такой же принцип лежит в основе техники отложенной загрузки фоновых изображений. Так мы обманываем браузер, не применяя свойство CSS «background-image» к элементу, пока этот элемент не попадёт в окно просмотра. Ниже рабочий пример отложенной загрузки фонового изображения CSS.

See the Pen Lazy Loading background images in CSS by ImageKit.io (@imagekit_io) on CodePen.

Здесь следует отметить, что код JavaScript для отложенной загрузки остаётся прежним. Мы используем Intersection Observer API, возвращаясь затем к отслеживанию событий. Хитрость заключается в CSS.

Элемент с идентификатором «bg-image» имеет заданное свойство «background-image» в CSS. Однако когда класс «lazy» добавляется к этому элементу, в CSS мы переопределяем свойство «background-image» и меняем его на значение «none».

Так как по правилам комбинация «bg-image» с «.lazy» имеет более высокое предпочтение в CSS, чем просто «bg-image», браузер применяет свойство «background-image: none» к элементу изначально.

Когда прокручиваем страницу вниз, the Intersection Observer (или отслеживание событий) определяет, что изображение находится в окне просмотра, и удаляет класс «lazy». Это изменяет применяемый сейчас CSS и применяет свойство «background-image» к элементу, начавшему загрузку фонового изображения.

Улучшить пользовательский опыт

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

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

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

1. Правильный дизайн плейсхолдеров

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

Мы использовали подобный плейсхолдер в нашем примере — везде он выкрашен в сплошной светло-серый цвет. Тем не менее можно сделать лучше. Ниже — примеры использования более удачных вариантов плейсхолдеров.

Плейсхолдер доминирующего цвета

Этот метод давно используется для результатов поиска изображений в Google и Pinterest.

Пример с Manu ninja

Может показаться, что это сложно реализовать. Но есть простой способ — сначала уменьшить изображение до пикселя 1×1, а затем масштабировать его до размера плейсхолдера — грубое приближение, но оно помогает легко получить один доминирующий цвет. Используя ImageKit, плейсхолдер доминирующего цвета можно получить с помощью цепного преобразования, как показано ниже.

Размер изображения-плейсхолдера составляет всего 661 байт, по сравнению с исходным изображением, которое имеет размер 12 700 байт — в 19 раз меньше. И это обеспечивает более приятный опыт перехода от плейсхолдера к изображению.

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

Плейсхолдер низкого качества (LQIP)

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

Это не только выглядит лучше, но сообщает о загрузке и даёт пользователю представление о том, чего ждать в реальном изображении. Этот метод используют Facebook и Medium для изображений на сайтах и в приложениях.

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

Рабочий пример и код для использования техники LQIP — по ссылке.

2. Добавление буферного времени

Часто пользователи быстро прокручивают страницу, и для загрузки и отображения картинки на экране требуется некоторое время. Событие «load image» может сработать с задержкой, как и плейсхолдеры. Это плохо влияет на пользовательский опыт.

Решение

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

С помощью Intersection Observer API можно использовать параметр «`root`» вместе с параметром «rootMargin» (работает по стандартному принципу поля CSS), чтобы увеличить границы рамки.

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

В этом примере используется пороговое значение 500 px для загрузки изображений.

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

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

Если не заметили ранее, во всех примерах третье изображение (image3.jpg) всегда загружается сразу, даже если оно находится вне области просмотра. Это было сделано в соответствии с тем же принципом: выполнить загрузку немного заранее для лучшего пользовательского опыта.

3. Как избежать смещения содержимого

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

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

Как показано в этом материале Smashing Magazine, смещение контента и видео — довольно неприятный опыт для пользователя.

Решение

Этого можно избежать, указав высоту и (или) ширину для конечного контейнера, чтобы браузер мог нарисовать контейнер изображения с известной высотой и шириной.

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

4. Не стоит применять отложенную загрузку для всех изображений

Ещё одна ошибка, которую часто совершают разработчики, — загружают все изображения на страницу с помощью отложенной загрузки. Это может сократить время на начальную загрузку страницы, но также приведёт к плохому пользовательскому опыту, поскольку многие изображения даже в верхней части страницы не будут отображаться до тех пор, пока JavaScript не будет выполнен.

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

• Любое изображение, которое присутствует в окне просмотра или в начале страницы, не должно загружаться с помощью отложенной загрузки. Это касается любого изображения-заголовка, рекламных баннеров, логотипов. Пользователь должен видеть их, как только страница загрузится. Помните, что мобильные и десктопные устройства будут иметь разные размеры экрана и, следовательно, разное количество изображений, которые будут видны на экране изначально. Таким образом, необходимо учитывать тип устройства, чтобы решить, какие изображения загружать изначально, а какие нет.
• Любое изображение, которое частично видно в окне просмотра, не должно загружаться с помощью отложенной загрузки. Это происходит по принципу, который обсуждался выше, — загружать чуть заранее. Любое изображение, находящееся, допустим, в 500 px от области просмотра, может быть загружено заранее.
• Если страница не длинная, её можно пролистать за несколько движений. Или если за пределами окна просмотра меньше пяти изображений, то отложенную загрузку можно не использовать. Это не принесёт существенной выгоды пользователю с точки зрения производительности. Дополнительный JavaScript, который вы загружаете на страницу, чтобы включить отложенную загрузку, компенсирует выигрыш от отложенной загрузки такого небольшого количества изображений.

Популярные JavaScript-библиотеки

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

• yall.js (Yet Another Lazy Loader) — использует Intersection Observer API и возвращается к отложенной загрузке на основе событий. Поддерживает все основные типы элементов HTML, но не «background-image». Также работает на Internet Explorer 11 и старших версиях.
• lazysizes — библиотека с обширной функциональностью. Поддерживает адаптивные изображения «srcset» и атрибут «sizes». Высокая эффективность даже без Intersection Observer API.
  
• jQuery Lazy — простая, основанная на jQuery, библиотека отложенной загрузки.
  
• WeltPixel Lazy Loading Enhanced — расширение для Magento 2 для отложенной загрузки изображений.
  
• Magento Lazy Image Loader — расширение для Magento 1.x для отложенной загрузки изображений.
  
• Shopify Lazy Image Plugin — расширение для Shopify для отложенной загрузки изображений. Платная.
  
• WordPress A3 Lazy Load — плагин отложенной загрузки изображений для WordPress.
  

Как проверить, всё ли работает

Самый простой способ — открыть инструменты разработчика в браузере Chrome. Перейдите на вкладку «Сеть» → «Изображения». Здесь при первом обновлении страницы должны загружаться только те изображения, которые должны присутствовать на странице изначально.

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

Другой способ — запустить расширение Lighthouse от Google Chrome на странице после внесения изменений и найти предложения в разделе Offscreen images.

Если не работает

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

Или можно использовать тег <noscript>, чтобы создать удобный интерфейс для этих пользователей. В треде Stack Overflow рассматриваются проблемы этого тега. Материал будет полезен для всех, чья целевая аудитория — такие пользователи.

Блочные изображения и фоновые изображения стихов в HTML и CSS

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

Итак, сначала мы хотим вставить эту фоновую графику. Теперь я хочу поднять вопрос, потому что бывают случаи, когда мы просто вставляем изображение в HTML. Итак, мы сделали это до сих пор с этим здесь. Это источник изображения, и мы поместили его в фактическую сторону HTML, и мы сделали это, когда поместили его в качестве фонового изображения. Помните, мы сделали это в прошлом проекте, у нас была эта гигантская фоновая графика. Так зачем вам делать и то, и другое?

Теперь у вас будет смесь того и другого. Итак, причина, по которой он у вас здесь, в HTML, заключается в том, что если он есть в HTML, он называется изображением блочного уровня. Это означает, что его видит браузер или, по крайней мере, поисковая система. Появляется поисковая система, такая как Google или Bing, приходит сюда и говорит: «Эй, смотрите, есть веб-сайт, посвященный ремонту велосипедов», потому что это есть в нашем заголовке. И все это, они говорят: «О, там много текста о ремонте велосипедов, есть даже изображение», «Там есть текст Alt, с парнем о том, что он делает с велосипедами», и все это как бы добавляет поисковику. способность понять вас и то, на что похож ваш веб-сайт и по чему вы должны ранжироваться, в то время как здесь, в CSS, он игнорирует это, он говорит: «Меня не волнует, что вы потратили целую вечность, играя с верхним отступом», потому что это не добавляет ценности поиску, верно?

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

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

Итак, для этого нам нужно скопировать графику. Итак, давайте найдем наши файлы упражнений, перейдем к Project2. Мне нужны эти три, фоновое изображение 1, 2 и 3. Давайте скопируем его, пойдем на мой рабочий стол, найдем Project2. Поместите его в папку с изображениями и посмотрите, они уже там. Твоего не будет, мои есть, так что вставь сюда свое. Мое уже здесь, потому что я уже несколько раз пробовал это видео, и оно пошло плохо, пытаясь объяснить уровень блока по сравнению с фоном CSS. Мне потребовалось пару попыток, но я чувствую, что на этот раз у меня все получилось. В любом случае, это последний раз, когда я собираюсь это сделать.

Итак, наши изображения есть, давайте добавим их, так что мы собираемся перейти к Card1, и мы могли бы избавиться от… давайте сделаем пару вещей, давайте избавимся от цвета фона всего этого. Значит, тебе, тебе, тебе они больше не нужны. Итак, Card1, давайте поместим наш фон, Помните, что это было? Изображение на заднем плане. Хороший легкий. Следующая часть этого довольно странная, это URL. URL, пара скобок, а внутри здесь нужно ввести путь к изображению. В нашем случае это изображения, а затем я могу щелкнуть фоновую карту изображения1. И в конце поставить точку с запятой. Сохрани это, поехали
 и проверьте, все ли работает.

Вы можете видеть, как это повторяется здесь, изображение недостаточно высокое, чтобы поместиться. Таким образом, вы никогда не добьетесь идеального соответствия изображения. Вы можете, вы можете заставить это, но поскольку мы используем процент, 30, что мы? 30%, будет очень сложно добиться идеального результата, верно? Таким образом, способ добиться идеального соответствия фону, вы помните, что это было? Это называлось фоном, я помню? Размер фона. помнишь это, Кавер? Это очень удобное CSS-свойство, которое как бы вписывается в поле, в котором оно находится. Так что, если поле станет меньше, скажем, 250, и я должен сделать его… я сделаю его значительно меньше, чтобы вы могли видеть, а ширина. .. давайте остановимся на этом. Имеет минимальную высоту, почему она еще высокая? Ах, так карты здесь.

Итак, первоначально мы добавили высоту к картам, и это действительно как бы иллюстрирует, почему добавление высоты немного затруднительно. Мы делаем это в этом классе только потому, что мне легко показать вам, » Эй, мы сделали тег Div», и мы знаем, что он в нужном месте, потому что мы дали ему высоту и цвет, но всякий раз, когда я работаю, никогда не добавляю высоту. Высота зависит от содержания, поэтому я буду удалять карты, вы делаете то же самое. Надеюсь, теперь он все еще работает? Нет, все эти парни дерутся. Так что эти ребята держат эту коробку красивой и высокой. Это не то, что я хочу. Итак, что я собираюсь сделать, так это избавиться от минимального роста на тебе, ты, и давайте посмотрим. Ну вот.

Самое классное в этом то, что если я сделаю сейчас ширину 100 пикселей, а ширину 50, вы видите, изображение попытается растянуться, чтобы заполнить пробел. Если я сделаю это на 10% по ширине, обложка все еще будет пытаться поместиться там. Дэн, это было ужасное объяснение. Что я хочу, чтобы вы сделали, я бы хотел, чтобы у вас был минимальный рост, скажем, 250 на данный момент, для всех трех из них. Я думаю, что он был установлен на 300, давайте изменим его здесь, я хотел бы, чтобы у вас не было высоты на картах. Ни на одном из них нет цвета, давайте посмотрим. Мы должны сохранить его, давайте немного посмотрим.

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

Я использую нижний, потому что этот материал наверху здесь, я не против того, чтобы его обрезали. Вы можете использовать Center, скажем, вы хотите сократить разницу, потому что ваше изображение просто имеет немного того и другого. Вы можете использовать Center, и это означает, что он как бы обрежет немного верх и немного низ. Давайте немного посмотрим. Я собираюсь вернуться на дно, это будет отменено, и я бы хотел, чтобы это было на всех них. Итак, я возьму это, может быть, то же самое здесь и то же самое для 3, но мне нужно пройти и изменить вас на 2, вас на 3. Посмотрим, насколько хорошо это сработало.

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

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

Загружать фоновые изображения в зависимости от размера экрана

Содержание

• Адаптивный фоновый дисплей не является адаптивным Фоновая загрузка
• Адаптивная загрузка фонового изображения
• Предотвратить загрузку фона скрытого элемента

TLDR: если все, что вас интересует, — это код, чтобы заставить это работать, перейдите в этот раздел и возьмите фрагмент кода.

Отзывчивый фон Отображение Неотзывчивый фон Загрузка

Установка свойства background-size фона в значение «cover» позволяет нам гарантировать, что он полностью покрывает область фона на любом размере экрана. Но, поскольку одно и то же изображение загружается независимо от размера экрана, этот параметр действует только с точки зрения отображения изображения, а не с точки зрения загруженного изображения. В результате вы можете загрузить фоновое изображение размером 1400 пикселей на экран мобильного устройства Google Nexus 4.

 
HTML {
  background: url('large_bg.jpg') фиксированный центр без повторов;
  размер фона: обложка;
  -webkit-background-size: обложка;
  -o-background-size: обложка;
  -moz-background-size: обложка;
}
 

Загрузка адаптивного фонового изображения

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

 
Экран @media и (максимальная ширина: 480 пикселей) {
  HTML {
    background: url('small_bg.jpg') фиксированный центр без повторов;
  }
}
Экран @media и (минимальная ширина: 481px) и (максимальная ширина: 900px) {
  HTML {
    background: url('med_bg.jpg') исправлен центр без повторов;
  }
}
Экран @media и (минимальная ширина: 901px) {
  HTML {
    background: url('large_bg.jpg') фиксированный центр без повторов;
  }
}
HTML {
  размер фона: обложка;
  -webkit-background-size: обложка;
  -o-background-size: обложка;
  -moz-background-size: обложка;
}
 

Предотвратить загрузку фона скрытого элемента

В случае, если вы хотите, чтобы фоновое изображение для элемента, скрытого на определенном экране, не загружалось, просто используйте медиа-запросы CSS, чтобы установить для фона значение «нет» для этого экрана.