Nastavitev GIF ' Format za izmenjavo grafike ” kot slika ozadja doda dizajnu vizualno privlačen element. GIF omogoča razvijalcem, da posredujejo informacije ali poudarijo izdelek ali storitev, kar pomaga pri ustvarjanju vizualne identitete blagovne znamke. Vendar pa morajo razvijalci zagotoviti, da uporaba GIF-ov ne preobremeni spletne strani ali odvrne pozornosti uporabnika od glavne vsebine.

Ta članek prikazuje postopek nastavitve GIF kot slike ozadja na spletni strani.

Kako nastaviti GIF kot sliko ozadja na spletni strani?

Nastavitev GIF-a kot slike ozadja pomaga pri ustvarjanju privlačnih elementov z dodajanjem vizualnih elementov.

GIF-i so še posebej uporabni na spletnih mestih, ki želijo prenesti občutek igrivosti ali muhavosti, ali na straneh, ki želijo poudariti določen izdelek ali funkcijo. Če ga želite nastaviti kot sliko ozadja, obiščite naslednje primere:

Primer 1: Nastavitev GIF kot fiksnega ozadja

Ker so elementi HTML, ki pomagajo pri izdelavi vsebine spletne strani, nameščeni znotraj ' ' oznaka. Zato z izbiro » telo ” in uporabo lastnosti CSS na njem. Vpliva na vse elemente HTML, ki jih vsebuje » ' oznaka.

Na primer, '

« in »

” se uporabljajo kot vsebina spletne strani. Oglejte si spodnji delček kode:

< telo >
< h1 > Nastavitev GIF kot slika ozadja na strani h1 >
< str > Ta GIF je bil dodan kot sliko ozadja na celotni strani z uporabo 'slika ozadja' Lastnina. Ta članek poganja Linuxhint. str >
telo >

Zdaj izberite element HTML »body« znotraj » ' ali v ločenem ' CSS ” za uporabo sloga na spletni strani:

telo {
slika ozadja: url ( 'morje.gif' ) ;
ponavljanje v ozadju: brez ponavljanja;
velikost ozadja: naslovnica;
oblazinjenje:50px;
velikost pisave: x-velika;
barva: bela;
}

V zgornjem kodnem bloku:

• • Prvič, ' url() ' se uporabi metoda, ki shrani pot do ' GIF ' mapa. In ta metoda se posreduje kot vrednost v CSS ' slika ozadja ” lastnina.
  • Nato nastavite ' brez ponovitve ' kot vrednost za CSS ' ozadje-ponovitev ” lastnost za ponovitev datoteke GIF.
  • Nato nastavite vrednost ' pokrov »v CSS« velikost ozadja ”, da pokrije ves razpoložljivi prostor
  • Nato vnesite vrednost ' 50 slikovnih pik « in » x-velika »v CSS« oblazinjenje « in » velikost pisave ” lastnosti. To doda razmik okoli besedila in poveča velikost pisave.

Po kompilaciji je spletna stran videti takole:

Zgornji rezultat kaže, da je bil gif dodan kot ozadje na spletni strani.

Primer 2: Nastavitev GIF-a kot drsljivega ozadja

Najprej ustvarite strukturo HTML, da bo vsebina spletne strani takšna:

< div razred = 'contai' >
< h1 > Nastavitev GIF kot slika ozadja na strani h1 >
< str > Ta GIF je bil dodan kot sliko ozadja na celotni strani z uporabo 'slika ozadja' Lastnina. Ta članek poganja Linuxhint. str >
div >

< div >
< h3 stil = 'barva: bela;' > Vsebina, napisana zunaj 'div' element h3 >
div >

V zgornji kodi:

• • Prvič, starš '
    ' se uporablja z razredom ' vsebujejo ”.
  • Nato uporabite » h1 « in » str ” Elemente HTML in jim zagotovi navidezno vsebino.
  • Po tem ustvarite še en '
    « in uporabite »

    ” tako, da ji zagotovite navidezne podatke.

Zdaj dodajte GIF kot ozadje na spletno stran, tako da vstavite naslednje lastnosti CSS:

.contai {
slika ozadja: url ( morje.gif ');
ponavljanje v ozadju: brez ponavljanja;
velikost ozadja: naslovnica;
višina: 100vh;
zaslon: flex;
align-items: center;
justify-content: center;
flex-direction: stolpec;
barva: bela;
velikost pisave: velika;
poravnava besedila: sredina;
polnilo: 2rem;
}

Opis zgoraj uporabljenega kodnega bloka:

• • Najprej nastavite » slikovna pot ”, “ brez ponovitve t' in ' pokrov ' kot vrednost za CSS ' slika ozadja ”, “ ozadje-ponovitev « in » velikost ozadja ” lastnosti.
  • Nato nastavite vrednost ' 100vh « in » flex »v CSS« višina « in » zaslon ” lastnosti.
  • Nato uporabite CSS ' barva ”, “ velikost pisave ”, “ poravnava besedila « in » oblazinjenje ” za uporabo sloga za vsebino.

Po koncu postopka prevajanja je spletna stran videti takole:

Izhod prikaže, da je ' GIF ” je bila vstavljena kot slika ozadja na celo stran.

Zaključek

Če želite nastaviti GIF kot sliko ozadja na spletni strani, CSS ' slika ozadja »lastnost je uporabljena v HTML-ju« telo ” element. Lastnost CSS, ki je uporabljena za element »body«, se samodejno uporabi za vse vsebujoče elemente. Z nastavitvijo » 100vh ” kot vrednost za lastnost višine je mogoče omogočiti tudi učinek drsenja. Omogoča, da se gif ozadja premika vzdolž drsenja. Ta članek je pokazal, kako nastaviti GIF kot sliko ozadja na spletni strani.