Данас су тражене веб странице са респонзивним позадинским сликама. Респонзивне веб странице пружају корисницима идеално корисничко искуство на скоро свим уређајима, укључујући мобилне, таблете или десктоп рачунаре. Прилагодљиве слике могу прилагодити позадину веб локације, величину екрана и димензије. Прилагодљиве слике осигуравају одржавање квалитета и пропорција. Поред тога, веб локација са позадинским сликама која реагује брзо се учитава.
Овај водич ће пружити упутства за прилагођавање позадинских слика димензијама екрана.
Како прилагодити позадинске слике димензијама екрана?
Слика се може прилагодити димензијама екрана тако што ћете проћи кроз упутства која су дата у наставку.
Корак 1: Креирајте ХТМЛ структуру
Прво направите ХТМЛ структуру и додајте екстерни стилски лист користећи <линк> таг у главном делу ХТМЛ-а. У ту сврху једноставно поставите „ <линк рел = “стилесхеет” хреф = “стиле.цсс”> ” унутар ознаке главе. „ рел ” ознака одређује однос датотеке са ХТМЛ документом. „ хреф ” ознака одређује адресу ЦСС датотеке:
< хтмл >
< глава >
< линк рел = 'стилесхеет' хреф = 'стиле.цсс' >
< наслов > Респонзивна позадинска слика наслов >
глава >
< тело >
-- Област за додавање другог садржаја-- >
тело >
хтмл >
Корак 2: Примените ЦСС
Сада примените ЦСС на „ тело ” одељак. Прво одредите слику у позадини. У ту сврху користите „ позадинска слика ” и наведите „ урл() ” вредност која садржи адресу датотеке слике.
Након тога, користите „ позадинска слика ” да одредите величину слике, „ бацкгроунд-репеат ” својство за подешавање понављања слике, и “ позадину-прилог ” да подесите да ли се слика помера са остатком странице или не. На крају, поставите „ маргина ' и ' паддинг ' до ' 0 ”:
тело {бацкгроунд-имаге: урл ( 'тест-имаге.јпг' ) ;
величина позадине: 100 % 100 % ;
/* Скалирајте слику на 100 % ширина и 100 % висина */
бацкгроунд-репеат: без понављања;
позадински прилог: фиксно;
маргина: 0 ;
паддинг: 0 ;
/* Опционо: Фиксна позадина */
}
Излаз
Ово је излаз пре склапања прозора претраживача:
Након контракције претраживача:
Горњи излаз потврђује да је слика прилагодила позадину димензијама екрана.
Закључак
Да бисте прилагодили позадинске слике димензијама екрана, прво укључите „ виевпорт ” у одељку главе за контролу димензија и скалирања. Затим направите ХТМЛ структуру и примените ЦСС. У ЦСС-у поставите „ бацкгроуд-сизе ” вредност својства на “ поклопац ” да бисте скалирали висину и ширину слике. Овај чланак је представио комплетан водич за прилагођавање позадинских слика димензијама екрана.