Obsah

• Na krok
• Metóda 1 zo 4: Nastavenie pevnej farby pozadia
• Metóda 2 zo 4: Použitie obrázka ako pozadia
• Metóda 3 zo 4: Vytvorenie gradientného pozadia
• Metóda 4 zo 4: Nastavte farebnú animáciu ako tapetu

Aby ste mohli nastaviť pozadie webovej stránky v HTML, stačí urobiť malú zmenu v prvku „body“ v rámci štýl> / štýl> značky. Kroky závisia od toho, ako chcete, aby vaša tapeta vyzerala. Naučte sa, ako nastaviť pozadie vášho webu ako jednofarebnú, obrázkovú, prechodovú alebo farebnú animáciu.

Na krok

Metóda 1 zo 4: Nastavenie pevnej farby pozadia

1. Otvorte súbor HTML vo svojom obľúbenom textovom editore. Od verzie HTML5 už nie je podporovaný atribút HTML bgcolor>. Farba pozadia, rovnako ako všetky ostatné štýlové stránky, musí byť nastavená pomocou CSS.
2. Pridajte znak štýl> / štýl> označí váš dokument. Všetky údaje o štýle vašej stránky (vrátane farby pozadia) by mali byť kódované v týchto značkách. Máš štýl> už označené značky, potom môžete iba prejsť na príslušnú časť súboru.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Zadajte prvok „telo“ do štýl> / štýl> značky. Čokoľvek, čo zmeníte na prvok „body“ v CSS, ovplyvní celú stránku.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Pridajte vlastnosť „background-color“ do prvku „body“. V tejto súvislosti bude fungovať iba jeden pravopis „farba“ (nie: farba).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Za „farbu pozadia“ umiestnite požadovanú farbu pozadia. Teraz môžete určiť názov farby (zelená, Modrá, vydatď.), použite hexadecimálne (hex) kódy (napr. #000000 pre čiernu, # ff0000 (pre červenú atď.) alebo zadaním hodnoty RGB pre farbu (napr rgb (255 255,0) pre žltú). Ďalej uvádzame príklad s hexadeximálnymi kódmi, vďaka ktorým je pozadie rovnaké ako pri banneri wikiHow:

   ! DOCTYPE html> html> hlava> štýl> telo {farba pozadia: # 93B874; } / style> / head> body> / body> / html>

   • Biely: #FFFFFF
   • Svetlo ružová: # FFCCE6
   • Spálená Sienna: #993300
   • Indigo - # 4B0082
   • Fialový - # EE82EE
   • Pozrite sa na výber farieb w3schools.com HTML a nájdite hexadecimálne kódy akejkoľvek farby, ktorú chcete.
6. Pomocou farby pozadia môžete použiť farby pozadia na ďalšie prvky. Rovnako ako nastavíte prvok tela, môžete pomocou farby pozadia nastaviť pozadie ostatných prvkov. Tieto prvky stačí umiestniť do štýl> / štýl> s vlastnosťou farba pozadia.

   ! DOCTYPE html> html> hlava> štýl> telo {farba pozadia: # 93B874; } h1 {farba pozadia: oranzova; } p {farba pozadia: rgb (255,0,0); } / style> / head> body> h1> Táto hlavička má oranžové pozadie / h1> p> Tento odsek má červené pozadie / p> / body> / html>

Metóda 2 zo 4: Použitie obrázka ako pozadia

1. Otvorte súbor HTML v textovom editore. Mnoho ľudí dáva prednosť použitiu obrázka ako pozadia pre svoj web. Pomocou tohto môžete nastaviť ako pozadie vzor, ​​textúru, fotografiu alebo akýkoľvek iný obrázok. Od HTML5 musia byť všetky pozadia v CSS nastavené pomocou CSS (kaskádových štýlov) štýl> / štýl> značky.
2. Pridajte znak štýl> / štýl> značky do súboru HTML. V týchto značkách by mali byť uvedené všetky údaje o štýle vašej stránky (vrátane farby pozadia). Už ste štýl> nastavené značky, prejdite na príslušnú časť súboru.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Zadajte prvok „telo“ do štýl> / štýl> značky. Čokoľvek, čo zmeníte na prvok „body“ v CSS, ovplyvní celú stránku.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Pridajte vlastnosť „background-image“ do prvku „body“. Pri pridávaní tejto vlastnosti budete potrebovať názov súboru vášho obrázka. Skontrolujte, či je obrázok uložený v rovnakom priečinku ako html súbor (alebo pridajte úplnú cestu k súboru na webový server).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); farba pozadia: # 93B874; } / style> / head> body> / body> / html>

   • Je dobré zahrnúť kód farba pozadia pre prípad, že by sa obrázok na pozadí nenačítal.
5. Vrstvte viac obrázkov. Môžete naskladať viac obrázkov na seba. To môže byť užitočné, ak máte obrázky s priehľadným pozadím, ktoré sa pri prekrývaní navzájom dopĺňajú.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); farba pozadia: # 93B874; } / style> / head> body> / body> / html>

   • Prvý obrázok je hore. Druhý obrázok je pod prvým.

Metóda 3 zo 4: Vytvorenie gradientného pozadia

1. Pomocou CSS vytvorte gradientné pozadie. Ak hľadáte niečo trochu štylizovanejšie ako jednofarebné, ale nie také zaneprázdnené ako farebná animácia, vyskúšajte gradientné pozadie. Prechody sú farby, ktoré sa menia na inú rovnocennosť. Pomocou CSS môžete vytvoriť a upraviť prechod. Predtým, ako začnete s vytváraním farebného prechodu, mali by ste získať dostatočné znalosti základov formátovania webovej stránky pomocou CSS.
2. Pochopte štandardnú syntax. Pri vytváraní prechodu budete potrebovať dve informácie: začiatočný bod a začiatočný uhol a farby, medzi ktorými dôjde k prechodu. Môžete vybrať viac farieb, ktoré sa všetky prekrývajú, a môžete určiť smer alebo uhol prechodu.

   pozadie: lineárny gradient (smer / uhol, farba1, farba2, farba3 atď.);

3. Vytvorte vertikálny gradient. Ak neurčíte smer, farba bude prebiehať zhora nadol. Rôzne prehľadávače majú rôzne verzie funkcie prechodu, takže budete musieť pridať rôzne verzie kódu.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Toto je potrebné na zabezpečenie toho, aby prechod preklenul celú stránku * /} body {pozadie: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / pozadie: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / pozadie: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / pozadie: linear-gradient (# 93B874, # C9DCB9); / * Predvolená syntax (musí byť posledná) * / background-color: # 93B874; / * Je dobré nastaviť farbu pozadia, ak sa gradient nenačíta * /} / style> / head> body> / body> / html>

4. Vytvorte prechod so smerom. Ak do gradientu pridáte smer, môžete upraviť posun farieb. Upozorňujeme, že rôzne prehliadače budú interpretovať pokyny odlišne. Všetky budú mať rovnaký farebný gradient.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } body {pozadie: -webkit-linear-gradient (vľavo, # 93B874, # C9DCB9); / * zľava doprava * / pozadie: -o-lineárny gradient (pravý, # 93B874, # C9DCB9); / * koniec vpravo * / pozadie: -moz-linear-gradient (vpravo, # 93B874, # C9DCB9); / * koniec vpravo * / pozadie: lineárny gradient (vpravo, # 93B874, # C9DCB9); / * presunie sa na pravú stranu * / farba pozadia: # 93B874; / * je dobré nastaviť farbu pozadia pre prípad, že sa prechod nebude načítať * /} / style> / head> body> / body> / html>

5. Na úpravu gradientu použite ďalšie vlastnosti. S prechodmi toho dokážete oveľa viac.
   • Napríklad môžete použiť nielen viac ako dve farby, ale za každú umiestniť aj určité percento. Týmto môžete určiť, koľko priestoru dostane každý farebný segment.

     pozadie: lineárny gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Dodajte farbám priehľadnosť. S týmto môžete vyblednúť farby. Rovnakou farbou miznite z farby na nič. Funkcia sa vám bude páčiť rgba () musí použiť na označenie farby. Konečná hodnota určuje stupeň transparentnosti: 0 za nepriehľadné a 1 pre priehľadné.

     pozadie: lineárny gradient (vpravo, rgba (147 184 116,0), rgba (147 184 116,1)));

Metóda 4 zo 4: Nastavte farebnú animáciu ako tapetu

1. Prejdite na štýl> vo vašom kóde HTML. Ak nájdete pevnú farbu pozadia, ale nie, experimentujte so zmenou farebného pozadia. Od HTML 5 musia byť farby pozadia definované pomocou CSS (kaskádové štýly). Ak ste nikdy pomocou CSS nenastavili farbu pozadia, pred vyskúšaním tejto metódy si prečítajte časť o nastavení pevnej farby pozadia.
2. Pridajte nehnuteľnosť animácia k prvku „telo“. Budete musieť pridať 2 rôzne vlastnosti, pretože každý prehliadač vyžaduje iný kód.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animácia: colorchange 60s infinite; } / style> / head> body> / body> / html>

   • -webkit-animácia vlastnosť je vyžadovaná pre prehliadače založené na prehliadači Chrome (Chrome, Opera, Safari). animácia je štandardom pre všetky ostatné prehľadávače.
   • zmena farby sa v tomto príklade nazýva animácia.
   • 60. roky je trvanie (60 sekúnd) animácie / prechodu. Nezabudnite to nastaviť pre webkit aj pre predvolenú syntax.
   • nekonečný označuje, že animácia by sa mala opakovať neurčito. Ak chcete farby radšej zacykliť a potom sa zastaviť na poslednej farbe, môžete túto časť vynechať.
3. Dodajte svojej animácii farby. Teraz použijete pravidlo @keyframes na nastavenie farieb pozadia, ktoré chcete prejsť, a tiež toho, ako dlho je možné každú farbu na stránke vidieť. Opäť budete musieť pridať viac kódovaní pre rôzne prehliadače.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animácia: colorchange 60s infinite; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {pozadie: # 33FFF3;} 25% {pozadie: # 78281F;} 50% {pozadie: # 117A65;} 75% {pozadie: # DC7633;} 100% {pozadie: # 9B59B6;}} / style> / head> body> / body> / html>

   • Všimnite si, že dva riadky (@ -webkit-keyframes a @keyframes majú rovnaké hodnoty pre farby pozadia a percentá. Mal by zostať jednotný, aby bol zážitok vo všetkých prehľadávačoch rovnaký.
   • Percentá (0%, 25%, atď.) predstavujú celkové trvanie animácie (60. roky). Po načítaní stránky bude mať farba pozadia nastavenú na 0% a (# 33FFF3). Po prehraní 25% alebo 60 sekúnd animácie sa pozadie zmení na # 78281F, a tak ďalej.
   • Trvanie a farby môžete upraviť podľa želania.