A GIF beállítása ' Grafikus csereformátum ” háttérképként egy tetszetős elemet ad a dizájnhoz. A GIF lehetővé teszi a fejlesztők számára, hogy információkat közvetítsenek vagy kiemeljenek egy terméket vagy szolgáltatást, amely segít a márka vizuális identitásának kialakításában. A fejlesztőknek azonban gondoskodniuk kell arról, hogy a GIF-ek használata ne terhelje túl a weboldalt, és ne vonja el a felhasználó figyelmét a fő tartalomról.

Ez a cikk bemutatja a GIF háttérképként való beállítását a weboldalon.

Hogyan állíthatom be a GIF-et háttérképként a weboldalon?

A GIF háttérképként való beállítása segít látványos elemek létrehozásában vizuális elemek hozzáadásával.

A GIF-ek különösen hasznosak azokon a webhelyeken, amelyek a játékosság vagy a szeszélyesség érzését szeretnék közvetíteni, vagy olyan oldalakon, amelyek egy adott terméket vagy funkciót szeretnének kiemelni. A beállításhoz háttérképként tekintse meg a következő példákat:

1. példa: GIF beállítása rögzített háttérként

Mivel a weboldal tartalmának felépítését segítő HTML elemek a „ ” címke. Ezért válassza ki a „ test ” elemet, és CSS-tulajdonságokat alkalmazunk rajta. Ez érinti a ' ” címke.

Például a „

” és „

” címkéket használunk a weboldal tartalmaként. Lásd az alábbi kódrészletet:

< test >
< h1 > GIF beállítása mint egy háttérkép az oldalon h1 >
< p > Ez a GIF hozzáadva mint egy háttérképet az egész oldalon használva 'háttérkép' Ingatlan. Ezt a cikket a Linuxhint hajtotta végre. p >
test >

Most válassza ki a „body” HTML elemet a „ ' címkében vagy egy külön ' CSS ” fájl a stílus alkalmazásához a weboldalon:

test {
háttér-kép: url ( 'sea.gif' ) ;
háttér-ismétlés: nincs ismétlés;
háttér-méret: borító;
padding: 50px;
font-size: x-large;
fehér szín;
}

A fenti kódblokkban:

• • Először is a „ url() ' módszert használják, amely tárolja a ' GIF ” fájlt. És ez a metódus értékként kerül átadásra a CSS-nek. háttérkép ' ingatlan.
  • Ezután állítsa be a „ nem-ismétlés ' értékként a CSS-hez' háttér-ismétlés ” tulajdonság a GIF fájl ismétléséhez.
  • Ezután állítsa be a ' borító 'a CSS-hez' háttér méretű ” ingatlan, hogy lefedje az összes rendelkezésre álló helyet
  • Ezt követően adja meg a „ 50 képpont ” és „ x nagy 'a CSS-hez' párnázás ” és „ betűméret ” tulajdonságait, ill. Ez szóközt ad a szöveg körül, és megnöveli a betűméretet.

Az összeállítás után a weboldal így néz ki:

A fenti kimenet azt mutatja, hogy egy gif lett hozzáadva háttérként a weboldalhoz.

2. példa: GIF beállítása görgethető háttérként

Kezdetben hozzon létre egy HTML-struktúrát a weboldal tartalmának létrehozásához, ehhez hasonló:

< div osztály = 'tartozik' >
< h1 > GIF beállítása mint egy háttérkép az oldalon h1 >
< p > Ez a GIF hozzáadva mint egy háttérképet az egész oldalon a segítségével 'háttérkép' Ingatlan. Ezt a cikket a Linuxhint hajtotta végre. p >
div >

< div >
< h3 stílus = 'fehér szín;' > kívül írt tartalom 'div' elem h3 >
div >

A fenti kódban:

• • Először is a szülő
    ' címke a ' osztályú tartalmaz ”.
  • Ezután használja a „ h1 ” és „ p ” HTML elemeket, és áltartalommal látja el őket.
  • Ezután hozzon létre egy másik '
    ', és használja a '

    ” címkét, ha áladatokat ad hozzá.

Most adja hozzá a GIF-et háttérként a weboldalhoz a következő CSS-tulajdonságok beszúrásával:

.contai {
háttér-kép: url ( sea.gif ');
háttér-ismétlés: nincs ismétlés;
háttér-méret: borító;
magasság: 100vh;
kijelző: flex;
align-ites: center;
indokol-tartalom: center;
hajlítási irány: oszlop;
fehér szín;
betűméret: nagy;
szöveg igazítása: középre;
párnázás: 2rem;
}

A fentebb használt kódblokk leírása:

• • Először állítsa be a „ kép-útvonal ”, „ nem-ismétlés t” és „ borító ' értékként a CSS-hez' háttérkép ”, „ háttér-ismétlés ” és „ háttér méretű ” tulajdonságait, ill.
  • Ezután állítsa be a ' 100vh ” és „ Flex 'a CSS-hez' magasság ” és „ kijelző ” tulajdonságait.
  • Ezután használja a CSS-t ' szín ”, „ betűméret ”, „ szöveg igazítás ” és „ párnázás ” tulajdonságokat a tartalom stílusának alkalmazásához.

Az összeállítási folyamat befejezése után a weboldal így néz ki:

A kimenet azt mutatja, hogy a „ GIF ” lett beszúrva háttérképként az egész oldalra.

Következtetés

Ha a GIF-et háttérképként szeretné beállítani a weboldalon, a CSS ' háttérkép 'tulajdonságot használnak a HTML-ben' test ” elemet. A „body” elemre alkalmazott CSS-tulajdonság automatikusan alkalmazásra kerül az összes elemet tartalmazó elemre. A „ 100vh ” a magasság tulajdonság értékeként a görgetési effektus is engedélyezhető. Lehetővé teszi, hogy a háttér gif a görgetés mentén mozogjon. Ez a cikk bemutatja, hogyan állíthat be egy GIF-et háttérképként a weboldalon.