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