Dandanes so povpraševanje po spletnih mestih z odzivnimi slikami v ozadju. Odzivna spletna mesta uporabnikom zagotavljajo idealno uporabniško izkušnjo na skoraj vseh napravah, vključno z mobilnimi, tabličnimi ali namiznimi računalniki. Odzivne slike lahko prilagodijo ozadje spletne strani, velikost zaslona in dimenzije. Odzivne slike zagotavljajo ohranjanje kakovosti in razmerja. Poleg tega se spletno mesto z odzivnimi slikami ozadja hitro naloži.
Ta priročnik vsebuje navodila za prilagajanje slik ozadja dimenzijam zaslona.
Kako prilagoditi slike ozadja dimenzijam zaslona?
Sliko lahko prilagodite dimenzijam zaslona, tako da upoštevate spodnja navodila po korakih.
1. korak: Ustvarite strukturo HTML
Najprej ustvarite strukturo HTML in dodajte zunanji slogovni list z uporabo
< html >
< glavo >
< povezava rel = 'stylesheet' href = 'style.css' >
< naslov > Odzivna slika ozadja naslov >
glavo >
< telo >
-- Območje za dodajanje druge vsebine -- >
telo >
html >
2. korak: Uporabite CSS
Zdaj uporabite CSS za » telo ”. Najprej določite sliko ozadja. V ta namen uporabite » slika ozadja « in določite » url() ” vrednost, ki vsebuje naslov slikovne datoteke.
Po tem uporabite » slika ozadja «, da določite velikost slike, » ozadje-ponovitev ' za nastavitev ponavljanja slike in ' ozadje-priponka ”, da nastavite, ali se slika premika skupaj s preostankom strani ali ne. Na koncu nastavite » marža « in » oblazinjenje ' do ' 0 ”:
telo {slika ozadja: url ( 'testna-slika.jpg' ) ;
velikost ozadja: 100 % 100 % ;
/* Prilagodite sliko na 100 % širina in 100 % višina */
ponavljanje v ozadju: brez ponavljanja;
ozadje-pritrditev: fiksno;
rob: 0 ;
oblazinjenje: 0 ;
/* Izbirno: fiksno ozadje */
}
Izhod
To je izhod pred krčenjem okna brskalnika:
Po krčenju brskalnika:
Zgornji rezultat potrjuje, da je slika prilagodila ozadje dimenzijam zaslona.
Zaključek
Če želite prilagoditi slike ozadja dimenzijam zaslona, najprej vključite » vidno polje ” v razdelku glave za nadzor dimenzij in skaliranja. Nato ustvarite strukturo HTML in uporabite CSS. V CSS nastavite » velikost ozadja ' vrednost lastnosti za ' pokrov ” za spreminjanje višine in širine slike. Ta članek predstavlja popoln vodnik za prilagajanje slik ozadja dimenzijam zaslona.