В настоящее время востребованы сайты с адаптивными фоновыми изображениями. Адаптивные веб-сайты обеспечивают пользователям идеальный пользовательский опыт практически на всех устройствах, включая мобильные телефоны, планшеты и настольные компьютеры. Адаптивные изображения могут адаптировать фон веб-сайта, размер экрана и размеры. Адаптивные изображения гарантируют сохранение качества и пропорций. Кроме того, веб-сайт с адаптивными фоновыми изображениями загружается быстро.
В этом руководстве приведены инструкции по адаптации фоновых изображений к размерам экрана.
Как адаптировать фоновые изображения к размерам экрана?
Изображение можно адаптировать к размерам экрана, следуя пошаговым инструкциям, приведенным ниже.
Шаг 1. Создайте структуру HTML
Сначала создайте структуру HTML и добавьте внешнюю таблицу стилей, используя команду <ссылка> тег в заголовке HTML. Для этого просто поместите « <ссылка rel = «таблица стилей» href = «style.css»> » внутри тега head. « отн. Тег » указывает связь файла с HTML-документом. « href Тег ” указывает адрес файла CSS:
< HTML >
< голова >
< связь отн = 'таблица стилей' href = 'стиль.css' >
< заголовок > Адаптивное фоновое изображение заголовок >
голова >
< тело >
-- Область для добавления остального контента-- >
тело >
HTML >
Шаг 2. Примените CSS
Теперь примените CSS к элементу « тело ' раздел. Сначала укажите фоновое изображение. Для этого используйте команду « изображение на заднем плане » и укажите « URL() », содержащее адрес файла изображения.
После этого используйте « изображение на заднем плане », чтобы указать размер изображения, « фоновое повторение » свойство для установки повторения изображения и « фоновое вложение », чтобы указать, будет ли изображение прокручиваться вместе с остальной частью страницы или нет. Наконец, установите « допуск ' и ' прокладка ' к ' 0 »:
тело {фоновое изображение: URL ( 'тест-изображение.jpg' ) ;
размер фона: 100 % 100 % ;
/* Масштабируйте изображение до 100 % ширина и 100 % высота */
фоновый повтор: без повтора;
фоновое вложение: исправлено;
допуск: 0 ;
дополнение: 0 ;
/* Необязательно: фиксированный фон. */
}
Выход
Это вывод перед сжатием окна браузера:
После сжатия браузера:
Приведенный выше вывод подтверждает, что изображение адаптировало фон к размерам экрана.
Заключение
Чтобы адаптировать фоновые изображения к размерам экрана, сначала добавьте параметр « область просмотра » в заголовке для управления размерами и масштабированием. Затем создайте структуру HTML и примените CSS. В CSS установите « размер фона ” стоимость недвижимости до “ крышка » для масштабирования высоты и ширины изображения. В этой статье представлено полное руководство по адаптации фоновых изображений к размерам экрана.