GIF iestatīšana ' Grafikas apmaiņas formāts ” kā fona attēls piešķir dizainam vizuāli pievilcīgu elementu. GIF ļauj izstrādātājiem nodot informāciju vai izcelt produktu vai pakalpojumu, kas palīdz izveidot zīmola vizuālo identitāti. Tomēr izstrādātājiem ir jānodrošina, lai GIF izmantošana nepārslogo tīmekļa lapu un nenovirza lietotāja uzmanību no galvenā satura.

Šajā rakstā ir parādīta procedūra, kā tīmekļa lapā iestatīt GIF kā fona attēlu.

Kā tīmekļa lapā iestatīt GIF kā fona attēlu?

GIF iestatīšana kā fona attēls palīdz izveidot uzkrītošus elementus, pievienojot vizuālos elementus.

GIF attēli ir īpaši noderīgi vietnēs, kas vēlas radīt rotaļīguma vai dīvainības sajūtu, vai lapās, kurās vēlas izcelt konkrētu produktu vai funkciju. Lai to iestatītu kā fona attēlu, skatiet tālāk norādītos piemērus.

1. piemērs: GIF iestatīšana kā fiksēts fons

Tā kā HTML elementi, kas palīdz veidot tīmekļa lapas saturu, tiek ievietoti “ ” tagu. Tāpēc, izvēloties “ ķermeni ” elementu un piemērojot tam CSS rekvizītus. Tas ietekmē visus saturošos HTML elementus ” tagu.

Piemēram, “

' un '

” tagi tiek izmantoti kā tīmekļa lapas saturs. Skatiet zemāk esošo koda fragmentu:

< ķermeni >
< h1 > GIF iestatīšana kā fona attēls lapā h1 >
< lpp > Šis GIF ir pievienots kā fona attēlu visā lapā, izmantojot 'fona attēls' Īpašums. Šo rakstu ir nodrošinājis Linuxhint. lpp >
ķermeni >

Tagad atlasiet HTML elementu “body” iekšpusē “ ' tagā vai atsevišķā ' CSS ” failu, lai tīmekļa lapā lietotu stilu:

ķermeni {
fona attēls: url ( 'sea.gif' ) ;
fona atkārtojums: neatkārtot;
fona izmērs: vāks;
polsterējums: 50 pikseļi;
fonta izmērs: x-large;
krāsa: balta;
}

Iepriekš minētajā koda blokā:

• • Pirmkārt, ' url() tiek izmantota metode, kas saglabā ceļu GIF ” failu. Un šī metode tiek nodota kā vērtība CSS. fona attēls ” īpašums.
  • Tālāk iestatiet ' nē-atkārtoties ' kā vērtību CSS ' fona atkārtojums ” īpašums GIF faila atkārtošanai.
  • Pēc tam iestatiet vērtību ' piesegt 'uz CSS' fona izmērs ” īpašumu, lai aptvertu visu pieejamo platību
  • Pēc tam norādiet vērtību “ 50 pikseļi ' un ' x-liels 'uz CSS' polsterējums ' un ' fonta izmērs ” īpašības, attiecīgi. Tādējādi tekstam tiek pievienotas atstarpes un palielināts fonta lielums.

Pēc apkopošanas tīmekļa lapa izskatās šādi:

Iepriekš redzamā izvade parāda, ka tīmekļa lapai kā fons ir pievienots gif.

2. piemērs: GIF iestatīšana kā ritināma fona

Sākotnēji izveidojiet HTML struktūru, lai izveidotu šādu tīmekļa lapas saturu:

< div klasē = 'kontai' >
< h1 > GIF iestatīšana kā fona attēls lapā h1 >
< lpp > Šis GIF ir pievienots kā fona attēlu visā lapā, izmantojot 'fona attēls' Īpašums. Šo rakstu ir nodrošinājis Linuxhint. lpp >
div >

< div >
< h3 stils = 'krāsa: balta;' > Saturs rakstīts ārpus 'div' elements h3 >
div >

Iepriekš minētajā kodā:

• • Pirmkārt, vecāks '
    tags tiek izmantots ar klasi ' satur ”.
  • Pēc tam izmantojiet “ h1 ' un ' lpp ” HTML elementi un nodrošināt tiem fiktīvu saturu.
  • Pēc tam izveidojiet citu '
    ” un izmantojiet „

    ” tagu, sniedzot tam fiktīvus datus.

Tagad pievienojiet GIF kā fonu tīmekļa lapai, ievietojot šādus CSS rekvizītus:

.contai {
fona attēls: url ( jūra.gif ');
fona atkārtojums: neatkārtot;
fona izmērs: vāks;
augstums: 100vh;
displejs: flex;
izlīdzināt vienumus: centrs;
attaisnot-saturs: centrs;
flex-direction: kolonna;
krāsa: balta;
fonta izmērs: liels;
teksta līdzināšana: centrs;
polsterējums: 2rem;
}

Iepriekš izmantotā koda bloka apraksts:

• • Vispirms iestatiet ' attēla ceļš ”, “ nē-atkārtoties t' un ' piesegt ' kā vērtību CSS ' fona attēls ”, “ fona atkārtojums ' un ' fona izmērs ” īpašības, attiecīgi.
  • Pēc tam iestatiet vērtību ' 100vh ' un ' flex 'uz CSS' augstums ' un ' displejs ” īpašības.
  • Pēc tam izmantojiet CSS ' krāsa ”, “ fonta izmērs ”, “ teksta līdzināšana ' un ' polsterējums ” rekvizītus, lai saturam piemērotu stilu.

Pēc kompilācijas procesa beigām tīmekļa lapa izskatās šādi:

Izvade parāda, ka “ GIF ” ir ievietots kā fona attēls visā lapā.

Secinājums

Lai iestatītu GIF kā fona attēlu tīmekļa lapā, CSS ' fona attēls 'īpašums tiek izmantots HTML' ķermeni ” elements. CSS rekvizīts, kas tiek lietots elementam “body”, tiek automātiski lietots visiem saturošajiem elementiem. iestatot “ 100vh ” kā augstuma rekvizīta vērtību, var iespējot arī ritināšanas efektu. Tas ļauj fona gif pārvietoties pa ritināšanu. Šajā rakstā ir parādīts, kā tīmekļa lapā iestatīt GIF kā fona attēlu.