Nastavenie GIF ' Formát výmeny grafiky “ ako obrázok na pozadí dodáva dizajnu vizuálne príťažlivý prvok. GIF umožňuje vývojárom sprostredkovať informácie alebo vyzdvihnúť produkt alebo službu, čo pomáha pri vytváraní vizuálnej identity značky. Vývojári však musia zabezpečiť, aby použitie GIF nepreťažilo webovú stránku alebo neodvrátilo pozornosť používateľa od hlavného obsahu.
Tento článok demonštruje postup nastavenia GIF ako obrázka pozadia na webovej stránke.
Ako nastaviť GIF ako obrázok na pozadí na webovej stránke?
Nastavenie obrázka GIF ako obrázka na pozadí pomáha pri vytváraní pútavých prvkov pridaním vizuálnych prvkov.
GIFy sú užitočné najmä na webových stránkach, ktoré chcú sprostredkovať pocit hravosti alebo náladovosti, alebo na stránkach, ktoré chcú zdôrazniť konkrétny produkt alebo funkciu. Ak ho chcete nastaviť ako obrázok na pozadí, navštívte nasledujúce príklady:
Príklad 1: Nastavenie GIF ako pevného pozadia
Keďže prvky HTML, ktoré pomáhajú pri vytváraní obsahu webovej stránky, sú umiestnené vo vnútri „ ” tag. Preto výberom možnosti „ telo ” a aplikovanie vlastností CSS naň. Ovplyvňuje všetky prvky HTML, ktoré obsahujú „ ” tag.
Napríklad „ “ a „ ” tagy sa používajú ako obsah webovej stránky. Pozrite si útržok kódu nižšie:
< telo >
< h1 > Nastavenie GIF ako Obrázok na pozadí na stránke h1 >
< p > Tento GIF bol pridaný ako obrázok na pozadí na celej stránke pomocou 'obrázok na pozadí' Nehnuteľnosť. Tento článok je založený na Linuxhint. p >
telo >
Teraz vyberte prvok HTML „body“ vo vnútri „ ” tag alebo v samostatnom “ CSS ” súbor na použitie štýlu na webovej stránke:
obrázok na pozadí: url ( 'sea.gif' ) ;
background-repeat: no-repeat;
veľkosť pozadia: obal;
padding:50px;
font-size: x-large;
farba: biela;
}
Vo vyššie uvedenom bloku kódu:
-
- Po prvé, „ url() “ používa sa metóda, ktorá ukladá cestu „ GIF “. A táto metóda sa odovzdá ako hodnota do CSS “ obrázok na pozadí ' nehnuteľnosť.
- Ďalej nastavte „ bez opakovania “ ako hodnotu pre CSS “ pozadie-opakovať ” vlastnosť pre opakovanie súboru GIF.
- Potom nastavte hodnotu „ kryt “ do CSS “ veľkosť pozadia “, aby pokryl celý dostupný priestor
- Potom zadajte hodnotu „ 50 pixelov “ a „ x-veľký “ do CSS “ vypchávka “ a „ veľkosť písma “ vlastnosti, resp. Tým sa pridá medzera okolo textu a zväčší sa veľkosť písma.
Po kompilácii webová stránka vyzerá takto:
Vyššie uvedený výstup ukazuje, že ako pozadie na webovú stránku bol pridaný gif.
Príklad 2: Nastavenie GIF ako rolovateľného pozadia
Najprv vytvorte štruktúru HTML, aby obsah webovej stránky vyzeral takto:
< div trieda = 'obsahuje' >< h1 > Nastavenie GIF ako Obrázok na pozadí na stránke h1 >
< p > Tento GIF bol pridaný ako obrázok na pozadí na celej stránke pomocou 'obrázok na pozadí' Nehnuteľnosť. Tento článok je založený na Linuxhint. p >
div >
< div >
< h3 štýl = 'farba:biela;' > Obsah napísaný mimo 'div' element h3 >
div >
Vo vyššie uvedenom kóde:
-
- Po prvé, rodič' Značka ” sa používa s triedou “ obsahujú “.
- Ďalej použite „ h1 “ a „ p ” HTML prvky a poskytujú im fiktívny obsah.
- Potom vytvorte ďalší „
“ a použite „ ” poskytnutím fiktívnych údajov.Teraz pridajte GIF ako pozadie na webovú stránku vložením nasledujúcich vlastností CSS:
.obsahujú {
obrázok na pozadí: url ( more.gif ');
background-repeat: no-repeat;
veľkosť pozadia: obal;
výška: 100vh;
displej: flex;
align-items: center;
zdôvodniť-obsah: stred;
smer ohybu: stĺpec;
farba: biela;
veľkosť písma: veľké;
text-align: center;
polstrovanie: 2rem;
}
Popis vyššie použitého bloku kódu:-
- Najprv nastavte „ obrazová cesta “, “ bez opakovania t“ a „ kryt “ ako hodnotu pre CSS “ obrázok na pozadí “, “ pozadie-opakovať “ a „ veľkosť pozadia “ vlastnosti, resp.
- Ďalej nastavte hodnotu „ 100vh “ a „ flex “ do CSS “ výška “ a „ displej vlastnosti.
- Potom použite CSS “ farba “, “ veľkosť písma “, “ zarovnanie textu “ a „ vypchávka ” vlastnosti na použitie štýlu na obsah.
Po ukončení procesu kompilácie bude webová stránka vyzerať takto:
Výstup zobrazuje, že „ GIF “ bol vložený ako obrázok pozadia na celú stránku.Záver
Ak chcete nastaviť GIF ako obrázok na pozadí webovej stránky, CSS „ obrázok na pozadí “vlastnosť sa používa v HTML” telo ' element. Vlastnosť CSS, ktorá sa použije na prvok „body“, sa automaticky použije na všetky prvky, ktoré ho obsahujú. Nastavením „ 100vh ” ako hodnotu vlastnosti height možno povoliť aj efekt posúvania. Umožňuje gif na pozadí pohybovať sa pozdĺž rolovania. Tento článok ukázal, ako nastaviť GIF ako obrázok na pozadí na webovej stránke.
- Po prvé, rodič'