GIF:n asettaminen' Graphics Interchange Format ” taustakuvana lisää visuaalisesti näyttävän elementin suunnitteluun. GIF:n avulla kehittäjät voivat välittää tietoa tai korostaa tuotetta tai palvelua, joka auttaa luomaan brändin visuaalista identiteettiä. Kehittäjien on kuitenkin varmistettava, että GIF-tiedostojen käyttö ei kuormita verkkosivua tai häiritse käyttäjää pääsisällöstä.

Tämä artikkeli esittelee GIF-tiedoston asettamisen verkkosivun taustakuvaksi.

Kuinka asettaa GIF taustakuvaksi verkkosivulle?

GIF:n asettaminen taustakuvaksi auttaa luomaan huomiota herättäviä elementtejä lisäämällä visuaalisia elementtejä.

GIF-tiedostot ovat erityisen hyödyllisiä verkkosivustoilla, jotka haluavat välittää leikkisyyttä tai oikeita mielipiteitä, tai sivuilla, joilla halutaan korostaa tiettyä tuotetta tai ominaisuutta. Voit asettaa sen taustakuvaksi seuraavissa esimerkeissä:

Esimerkki 1: GIF:n asettaminen kiinteäksi taustaksi

Koska HTML-elementit, jotka auttavat rakentamaan verkkosivun sisältöä, sijoitetaan ' ' -tunniste. Tästä syystä valitsemalla ' kehon ”-elementti ja CSS-ominaisuuksien käyttäminen siihen. Se vaikuttaa kaikkiin ' ' -tunniste.

Esimerkiksi '

' ja '

” -tageja hyödynnetään verkkosivun sisältönä. Katso alla oleva koodinpätkä:

< kehon >
< h1 > GIF-asetus kuten Taustakuva sivulla h1 >
< s > Tämä GIF on lisätty kuten taustakuva koko sivulla käyttämällä 'taustakuva' Omaisuus. Tämän artikkelin on toimittanut Linuxhint. s >
kehon >

Valitse nyt 'body' HTML-elementti ' ' -tunnisteessa tai erillisessä ' CSS ”-tiedosto tyylin käyttämiseksi verkkosivulla:

kehon {
taustakuva: url ( 'sea.gif' ) ;
taustatoisto: ei toistoa;
taustan koko: kansi;
täyte: 50px;
fontin koko: x-suuri;
väri valkoinen;
}

Yllä olevassa koodilohkossa:

• • Ensinnäkin ' url() ' -menetelmää käytetään, joka tallentaa ' GIF ”tiedosto. Ja tämä menetelmä välitetään arvona CSS:lle ' taustakuva ” omaisuutta.
  • Aseta seuraavaksi ' ei-toistoa ' arvona CSS:lle' taustatoisto ”-ominaisuus GIF-tiedoston toistolle.
  • Aseta sitten arvo ' peite 'CSS:ään' taustan kokoinen ” kiinteistö kattamaan kaiken käytettävissä olevan tilan
  • Anna sen jälkeen arvo ' 50 pikseliä ' ja ' x iso 'CSS:ään' pehmuste ' ja ' Fonttikoko ”-ominaisuuksia. Tämä lisää välilyöntejä tekstin ympärille ja suurentaa fonttikokoa.

Kokoamisen jälkeen verkkosivu näyttää tältä:

Yllä oleva tulos osoittaa, että verkkosivulle on lisätty taustakuvaksi gif.

Esimerkki 2: GIF:n asettaminen vieritettäväksi taustaksi

Luo aluksi HTML-rakenne tehdäksesi verkkosivun sisällöstä seuraavanlaisen:

< div luokkaa = 'contai' >
< h1 > GIF-asetus kuten Taustakuva sivulla h1 >
< s > Tämä GIF on lisätty kuten taustakuva koko sivulla käyttämällä 'taustakuva' Omaisuus. Tämän artikkelin on toimittanut Linuxhint. s >
div >

< div >
< h3 tyyli = 'väri valkoinen;' > Sisältö on kirjoitettu ulkopuolella 'div' elementti h3 >
div >

Yllä olevassa koodissa:

• • Ensinnäkin vanhempi'
    ' -tunnistetta käytetään luokassa ' sisältää ”.
  • Käytä seuraavaksi ' h1 ' ja ' s ” HTML-elementtejä ja tarjota niille tyhjää sisältöä.
  • Luo sen jälkeen toinen '
    ' ja käytä '

    ” -tunnisteen antamalla sille valedataa.

Lisää nyt GIF verkkosivun taustaksi lisäämällä seuraavat CSS-ominaisuudet:

.contai {
taustakuva: url ( sea.gif ');
taustatoisto: ei toistoa;
taustan koko: kansi;
korkeus: 100vh;
näyttö: flex;
kohdista kohteet: keskellä;
perustele-sisältö: keskus;
flex-suunta: pylväs;
väri valkoinen;
fontin koko: suuri;
tekstin tasaus: keskellä;
pehmuste: 2rem;
}

Yllä käytetyn koodilohkon kuvaus:

• • Aseta ensin ' kuva-polku ”, “ ei-toistoa t' ja ' peite ' arvona CSS:lle' taustakuva ”, “ taustatoisto ' ja ' taustan kokoinen ”-ominaisuuksia.
  • Aseta seuraavaksi arvo 100vh ' ja ' flex 'CSS:ään' korkeus ' ja ' näyttö ” ominaisuuksia.
  • Käytä sen jälkeen CSS:ää väri ”, “ Fonttikoko ”, “ tekstin tasaus ' ja ' pehmuste ”-ominaisuuksia soveltaaksesi tyyliä sisältöön.

Kokoamisprosessin päätyttyä verkkosivu näyttää tältä:

Tulos näyttää, että ' GIF ” on lisätty taustakuvaksi koko sivulle.

Johtopäätös

Jos haluat asettaa GIF:n verkkosivun taustakuvaksi, CSS ' taustakuva '-ominaisuutta käytetään HTML:ssä' kehon ”elementtiä. CSS-ominaisuus, jota käytetään 'body'-elementtiin, sovelletaan automaattisesti kaikkiin sisältäviin elementteihin. Asettamalla ' 100vh ' korkeusominaisuuden arvona voidaan myös ottaa käyttöön vieritystehoste. Sen avulla tausta gif liikkuu vieritystä pitkin. Tämä artikkeli on osoittanut, kuinka GIF-tiedosto asetetaan verkkosivun taustakuvaksi.