GIF nustatymas “ Grafikos mainų formatas “, kaip fono paveikslėlis, prideda vizualiai patrauklų dizaino elementą. GIF leidžia kūrėjams perteikti informaciją arba pabrėžti produktą ar paslaugą, kuri padeda sukurti prekės ženklo vizualinį identitetą. Tačiau kūrėjai turi užtikrinti, kad GIF naudojimas neapsunkintų tinklalapio ir neatitrauktų vartotojo dėmesio nuo pagrindinio turinio.

Šiame straipsnyje parodyta GIF nustatymo kaip fono paveikslėlio tinklalapyje procedūra.

Kaip nustatyti GIF kaip fono paveikslėlį tinklalapyje?

GIF nustatymas kaip fono vaizdas padeda sukurti akį traukiančius elementus pridedant vaizdinių elementų.

GIF yra ypač naudingi svetainėse, kuriose norima perteikti žaismingumo ar įnoringumą, arba puslapiuose, kuriuose norima pabrėžti konkretų produktą ar funkciją. Norėdami jį nustatyti kaip fono paveikslėlį, žr. šiuos pavyzdžius:

1 pavyzdys: GIF nustatymas kaip fiksuoto fono

Kadangi HTML elementai, padedantys kurti tinklalapio turinį, patalpinami „ “ žymą. Štai kodėl, pasirinkus „ kūnas “ elementą ir taikydami jam CSS savybes. Tai turi įtakos visiems HTML elementams „ “ žymą.

Pavyzdžiui, „

“ ir „

“ žymos naudojamos kaip tinklalapio turinys. Žiūrėkite toliau pateiktą kodo fragmentą:

< kūnas >
< h1 > GIF nustatymas kaip fono paveikslėlis puslapyje h1 >
< p > Šis GIF buvo pridėtas kaip fono paveikslėlis visame puslapyje naudojant 'fono vaizdas' Nuosavybė. Šį straipsnį sukūrė Linuxhint. p >
kūnas >

Dabar pasirinkite 'body' HTML elementą viduje ' “ žymoje arba atskiroje “ CSS ” failą, kad pritaikytumėte stilių tinklalapyje:

kūnas {
fono vaizdas: url ( 'sea.gif' ) ;
fono kartojimas: nekartoti;
fono dydis: viršelis;
pamušalas: 50px;
šrifto dydis: x didelis;
spalva: balta;
}

Aukščiau esančiame kodo bloke:

• • Pirma, „ url() naudojamas metodas, kuris išsaugo kelią GIF “ failą. Ir šis metodas perduodamas kaip reikšmė CSS ' fono vaizdas ' nuosavybė.
  • Tada nustatykite „ nekartoti “ kaip CSS reikšmę “ fono kartojimas “ nuosavybę, skirtą GIF failo kartojimui.
  • Tada nustatykite reikšmę ' viršelis 'į CSS' fono dydžio ” turtą, kad padengtų visą turimą plotą
  • Po to pateikite vertę „ 50 piks “ ir „ x didelis 'į CSS' kamšalas “ ir „ šrifto dydis “ savybes, atitinkamai. Tai prideda tarpų aplink tekstą ir padidina šrifto dydį.

Po kompiliavimo tinklalapis atrodo taip:

Aukščiau pateikta išvestis rodo, kad gif buvo pridėtas kaip tinklalapio fonas.

2 pavyzdys: GIF nustatymas kaip slenkamą foną

Iš pradžių sukurkite HTML struktūrą, kad tinklalapio turinys būtų toks:

< div klasė = 'contai' >
< h1 > GIF nustatymas kaip fono paveikslėlis puslapyje h1 >
< p > Šis GIF buvo pridėtas kaip fono paveikslėlis visame puslapyje naudojant 'fono vaizdas' Nuosavybė. Šį straipsnį sukūrė Linuxhint. p >
div >

< div >
< h3 stilius = 'spalva: balta;' > Turinys parašytas ne 'div' elementas h3 >
div >

Aukščiau pateiktame kode:

• • Pirma, tėvas “
    “ žyma naudojama su “ klase turėti “.
  • Tada naudokite „ h1 “ ir „ p “ HTML elementus ir pateikti jiems netikrą turinį.
  • Po to sukurkite kitą '
    “ ir naudokite „

    “ žymą pateikdami jai netikrus duomenis.

Dabar pridėkite GIF kaip foną tinklalapyje, įterpdami šias CSS ypatybes:

.contai {
fono vaizdas: url ( jūra.gif ');
fono kartojimas: nekartoti;
fono dydis: viršelis;
aukštis: 100vh;
ekranas: lankstus;
lygiuoti elementus: centre;
pateisinti-turinys: centras;
lankstumo kryptis: stulpelis;
spalva: balta;
šrifto dydis: didelis;
teksto lygiavimas: centre;
paminkštinimas: 2rem;
}

Aukščiau naudoto kodų bloko aprašymas:

• • Pirmiausia nustatykite „ vaizdas-kelis “, „ nekartoti t“ ir „ viršelis “ kaip CSS reikšmę “ fono vaizdas “, „ fono kartojimas “ ir „ fono dydžio “ savybes, atitinkamai.
  • Tada nustatykite reikšmę ' 100vh “ ir „ lankstus 'į CSS' aukščio “ ir „ ekranas “ savybes.
  • Po to naudokite CSS ' spalva “, „ šrifto dydis “, „ teksto lygiavimas “ ir „ kamšalas “ ypatybes, kad pritaikytumėte turiniui stilių.

Pasibaigus kompiliavimo procesui, tinklalapis atrodo taip:

Išvestis rodo, kad „ GIF “ buvo įterptas kaip fono paveikslėlis visame puslapyje.

Išvada

Norėdami nustatyti GIF kaip fono paveikslėlį tinklalapyje, CSS ' fono vaizdas 'ypatybė naudojama HTML' kūnas “ elementas. CSS ypatybė, taikoma elementui „body“, automatiškai taikoma visiems elementams, kuriuose yra. Nustatydami „ 100vh “, kaip aukščio savybės vertę, taip pat galima įjungti slinkimo efektą. Tai leidžia fono GIF judėti slinkties metu. Šiame straipsnyje parodyta, kaip tinklalapyje nustatyti GIF kaip fono paveikslėlį.