Napjainkban keresettek a reszponzív háttérképeket tartalmazó weboldalak. A reszponzív webhelyek ideális felhasználói élményt biztosítanak a felhasználóknak szinte minden eszközön, beleértve a mobilokat, a táblagépeket és az asztali számítógépeket is. A reszponzív képek adaptálhatják a webhely hátterét, a képernyő méretét és méreteit. A reszponzív képek biztosítják a minőség és az arányok megőrzését. Ezenkívül a reszponzív háttérképeket tartalmazó webhely gyorsan betöltődik.
Ez az útmutató utasításokat ad a háttérképek képernyőméretekhez való igazításához.
Hogyan lehet a háttérképeket a képernyő méretéhez igazítani?
A kép a képernyő méretéhez igazodhat az alábbi lépésenkénti utasítások végrehajtásával.
1. lépés: Hozzon létre egy HTML-struktúrát
Először hozzon létre egy HTML-struktúrát, és adja hozzá a külső stíluslapot a címkét a HTML fejrészében. Ebből a célból egyszerűen helyezze el a „ ” a fejcímke belsejében. A ' rel ” címke a fájl és a HTML-dokumentum kapcsolatát határozza meg. A ' href ” címke a CSS-fájl címét adja meg:
< html >
< fej >
< link rel = 'stíluslap' href = 'stílus.css' >
< cím > Reszponzív háttérkép cím >
fej >
< test >
-- Terület a többi tartalom hozzáadásához-- >
test >
html >
2. lépés: Alkalmazza a CSS-t
Most alkalmazza a CSS-t a „ test ” szakaszban. Először adja meg a háttérképet. Erre a célra használja a „ háttérkép ', és adja meg a ' url() ” érték, amely a képfájl címét tartalmazza.
Ezt követően használja a „ háttérkép ' a kép méretének megadásához, a ' háttér-ismétlés ” tulajdonság a kép ismétlődésének beállításához, és a „ háttér-melléklet ” beállításához, hogy a kép görgessen-e az oldal többi részével vagy sem. Végül állítsa be a „ árrés ” és „ párnázás ' nak nek ' 0 ”:
test {háttér-kép: url ( 'teszt-kép.jpg' ) ;
háttérméret: 100 % 100 % ;
/* Méretezze át a képet 100 % szélessége és 100 % magasság */
háttér-ismétlés: nincs ismétlés;
háttér-csatolás: rögzített;
árrés: 0 ;
párnázás: 0 ;
/* Nem kötelező: rögzített háttér */
}
Kimenet
Ez a kimenet a böngészőablak szerződtetése előtt:
A böngésző összehúzódása után:
A fenti kimenet megerősíti, hogy a kép a hátteret a képernyő méretéhez igazította.
Következtetés
Ha a háttérképeket a képernyő méretéhez szeretné igazítani, először adja meg a „ nézetablak ” a fejrészben a méretek és a méretezés szabályozásához. Ezután hozzon létre egy HTML-struktúrát, és alkalmazza a CSS-t. A CSS-ben állítsa be a „ háttér méretű ' ingatlan értéke a ' borító ” értékkel méretezheti a kép magasságát és szélességét. Ez a cikk egy teljes útmutatót mutat be a háttérképek képernyőméretekhez való igazításához.