În zilele noastre, site-urile web cu imagini de fundal receptive sunt la cerere. Site-urile web responsive oferă utilizatorilor o experiență de utilizator ideală pe aproape toate dispozitivele, inclusiv pe telefoane mobile, tablete sau desktop. Imaginile responsive pot adapta fundalul site-ului web, dimensiunea ecranului și dimensiunile. Imaginile receptive asigură menținerea calității și proporției. În plus, site-ul web cu imagini de fundal receptive se încarcă rapid.
Acest ghid va oferi instrucțiuni pentru a adapta imaginile de fundal la dimensiunile ecranului.
Cum să adaptezi imaginile de fundal la dimensiunile ecranului?
Imaginea se poate adapta la dimensiunile ecranului parcurgând instrucțiunile treptate de mai jos.
Pasul 1: Creați o structură HTML
Mai întâi, creați o structură HTML și adăugați foaia de stil externă folosind etichetă în secțiunea head a HTML. În acest scop, plasați pur și simplu „ ” în interiorul etichetei de cap. „ rel ” eticheta specifică relația fișierului cu documentul HTML. „ href ” eticheta specifică adresa fișierului CSS:
< html >
< cap >
< legătură rel = 'foaia de stil' href = „style.css” >
< titlu > Imagine de fundal receptivă titlu >
cap >
< corp >
-- Zona pentru adăugarea celuilalt conținut -- >
corp >
html >
Pasul 2: Aplicați CSS
Acum, aplicați CSS la „ corp ' secțiune. Mai întâi, specificați imaginea de fundal. În acest scop, utilizați „ imagine de fundal ” și specificați „ url() ” valoare care conține adresa fișierului imagine.
După aceea, utilizați „ imagine de fundal ” pentru a specifica dimensiunea imaginii, „ fundal-repetare „proprietatea pentru a seta repetarea imaginii și „ atașament de fundal ” pentru a seta dacă imaginea se derulează cu restul paginii sau nu. În cele din urmă, setați „ marginea ' și ' căptușeală ' la ' 0 ”:
corp {imagine de fundal: url ( „test-image.jpg” ) ;
dimensiunea fundalului: 100 % 100 % ;
/* Scala imaginea la 100 % latimea si 100 % înălţime */
background-repeat: fără repetare;
fundal-atașare: fix;
marja: 0 ;
umplutura: 0 ;
/* Opțional: fundal fix */
}
Ieșire
Aceasta este rezultatul înainte de a contracta fereastra browserului:
După contractarea browserului:
Rezultatul de mai sus confirmă că imaginea a adaptat fundalul la dimensiunile ecranului.
Concluzie
Pentru a adapta imaginile de fundal la dimensiunile ecranului, mai întâi, includeți „ fereastra ” în secțiunea cap pentru a controla dimensiunile și scalarea. Apoi, creați o structură HTML și aplicați CSS. În CSS, setați „ dimensiunea fundalului „valoarea proprietății la „ acoperi ” pentru a scala înălțimea și lățimea unei imagini. Acest articol a prezentat un ghid complet pentru adaptarea imaginilor de fundal la dimensiunile ecranului.