GIF-i seadistamine ' Graafika vahetusvorming ” taustapildina lisab kujundusele visuaalselt atraktiivse elemendi. GIF võimaldab arendajatel edastada teavet või esile tõsta toodet või teenust, mis aitab luua brändi visuaalset identiteeti. Arendajad peavad aga tagama, et GIF-ide kasutamine ei koormaks veebilehte üle ega tõmbaks kasutaja tähelepanu põhisisult kõrvale.

See artikkel demonstreerib GIF-i veebilehe taustapildiks määramise protseduuri.

Kuidas määrata GIF-i veebilehel taustapildiks?

GIF-i taustapildiks seadmine aitab luua pilkupüüdvaid elemente, lisades visuaalseid elemente.

GIF-id on eriti kasulikud veebisaitidel, mis soovivad edasi anda mängulisuse või kapriissuse tunnet, või lehtedel, mis soovivad konkreetset toodet või funktsiooni esile tõsta. Taustapildina seadistamiseks vaadake järgmisi näiteid:

Näide 1: GIF-i määramine fikseeritud taustaks

Kuna HTML-i elemendid, mis aitavad veebilehe sisu luua, paigutatakse ” silti. Seetõttu valides „ keha ” elementi ja rakendades sellele CSS-i atribuute. See mõjutab kõiki HTML-i sisaldavaid elemente ” silti.

Näiteks '

” ja „

” silte kasutatakse veebilehe sisuna. Vaadake allolevat koodilõiku:

< keha >
< h1 > GIF-i seadistamine nagu Taustapilt lehel h1 >
< lk > See GIF on lisatud nagu taustapilti kogu lehel kasutades 'taustapilt' Kinnisvara. Selle artikli allikaks on Linuxhint. lk >
keha >

Nüüd valige jaotises 'Keha' HTML-element ' sildil või eraldi ' CSS ” faili stiili rakendamiseks veebilehel:

keha {
taustapilt: url ( 'sea.gif' ) ;
background-repeat: no-repeat;
tausta suurus: kaas;
polster: 50px;
fondi suurus: x-large;
värv: valge;
}

Ülaltoodud koodiplokis:

• • Esiteks, ' url() Kasutatakse meetodit, mis salvestab GIF ” faili. Ja see meetod edastatakse väärtusena CSS-ile ' taustapilt ” vara.
  • Järgmisena määrake ' ei-korda ' CSS-i väärtusena ' taustakordus ” atribuut GIF-faili kordamiseks.
  • Seejärel määrake väärtuse ' kaas 'CSS-i' tausta suurus ” kinnisvara kogu vaba ruumi katmiseks
  • Pärast seda esitage väärtus ' 50 pikslit ” ja „ x-suur 'CSS-i' polsterdus ” ja „ fondi suurus ” omadused. See lisab teksti ümber tühikuid ja suurendab fondi suurust.

Pärast koostamist näeb veebileht välja selline:

Ülaltoodud väljund näitab, et veebilehe taustaks on lisatud gif.

Näide 2: GIF-i määramine keritavaks taustaks

Esialgu looge HTML-struktuur, et muuta veebilehe sisu järgmiselt:

< div klass = 'contai' >
< h1 > GIF-i seadistamine nagu Taustapilt lehel h1 >
< lk > See GIF on lisatud nagu taustapilt kogu lehel, kasutades 'taustapilt' Kinnisvara. Selle artikli allikaks on Linuxhint. lk >
div >

< div >
< h3 stiilis = 'värv: valge;' > Sisu, mis on kirjutatud väljaspool 'div' element h3 >
div >

Ülaltoodud koodis:

• • Esiteks, vanem '
    ' silti kasutatakse koos klassiga ' sisaldama ”.
  • Järgmisena kasutage ' h1 ” ja „ lk ” HTML-i elemente ja pakkuda neile näivat sisu.
  • Pärast seda looge teine ​​'
    ” ja kasuta „

    ” sildi, pakkudes sellele näivaid andmeid.

Nüüd lisage GIF veebilehe taustaks, sisestades järgmised CSS-i atribuudid:

.contai {
taustapilt: url ( sea.gif ');
background-repeat: no-repeat;
tausta suurus: kaas;
kõrgus: 100vh;
ekraan: flex;
joonda-elemendid: keskel;
õigustama-sisu: keskpunkt;
paindesuund: veerg;
värv: valge;
fondi suurus: suur;
teksti joondamine: keskel;
polster: 2rem;
}

Ülaltoodud koodiploki kirjeldus:

• • Esmalt määrake ' pilt-tee ”, “ ei-korda t' ja ' kaas ' CSS-i väärtusena ' taustapilt ”, “ taustakordus ” ja „ tausta suurus ” omadused.
  • Järgmisena määrake väärtus ' 100vh ” ja „ painduv 'CSS-i' kõrgus ” ja „ kuva ” omadused.
  • Pärast seda kasutage CSS-i ' värvi ”, “ fondi suurus ”, “ teksti joondamine ” ja „ polsterdus ” atribuudid sisule stiili rakendamiseks.

Pärast kompileerimisprotsessi lõppu näeb veebileht välja järgmine:

Väljund näitab, et ' GIF ” on lisatud kogu lehele taustapildiks.

Järeldus

GIF-i määramiseks veebilehe taustapildiks CSS ' taustapilt HTML-is kasutatakse atribuuti ' keha ” element. CSS-i atribuut, mis on rakendatud elemendile „body”, rakendatakse automaatselt kõigile seda sisaldavatele elementidele. Seades ' 100vh ” kõrguse atribuudi väärtusena saab lubada ka kerimise efekti. See võimaldab tausta GIF-il liikuda mööda kerimist. See artikkel on näidanud, kuidas määrata GIF-i veebilehe taustapildiks.