Vsebina

• Stopati
• Metoda 1 od 4: Nastavitev trdne barve ozadja
• 2. metoda od 4: Uporaba slike kot ozadja
• 3. metoda od 4: Ustvarite gradient ozadje
• 4. način od 4: Nastavite barvno animacijo za ozadje

Če želite nastaviti ozadje spletne strani v HTML-ju, morate le spremeniti element "body" v slog> / slog> oznake. Koraki so odvisni od tega, kako želite videti ozadje. Naučite se nastaviti ozadje spletnega mesta kot enobarvno, sliko, preliv ali barvno animacijo.

Stopati

Metoda 1 od 4: Nastavitev trdne barve ozadja

1. Datoteko HTML odprite v svojem najljubšem urejevalniku besedil. Od HTML5 atribut HTML bgcolor> ni več podprt. Barvo ozadja, tako kot vse druge slogovne vidike vaše strani, morate nastaviti s CSS.
2. Dodajte slog> / slog> označi vaš dokument. Vsi podatki o slogu za vašo stran (vključno z barvo ozadja) morajo biti kodirani znotraj teh oznak. Ali imate slog> že označene oznake, nato se lahko preprosto pomaknete do tistega dela datoteke.

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

3. Vnesite element "body" znotraj slog> / slog> oznake. Vse, kar spremenite v element "body" v CSS, bo vplivalo na celotno stran.

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

4. Elementu "body" dodajte lastnost "background-color". V tem kontekstu bo deloval samo en napis "barva" (ne: barva).

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

5. Postavite želeno barvo ozadja za "background-color". Zdaj lahko navedete ime barve (zelena, modra, izditd.), uporabite šestnajstiške (šestnajstiške) kode (npr. #000000 za črno, # ff0000 za rdečo itd.) ali z vpisom vrednosti RGB za barvo (npr rgb (255.255,0) za rumeno). Spodaj je primer s šestnajstiškimi kodami, zaradi česar je ozadje enako kot pasica wikiHow:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

   • Bela: #FFFFFF
   • Svetlo roza: # FFCCE6
   • Sežgana Sienna: #993300
   • Indigo - # 4B0082
   • Vijolična - # EE82EE
   • Oglejte si izbirnik barv HTML w3schools.com in poiščite šestnajstiške kode katere koli barve.
6. Z barvo ozadja uporabite barve ozadja za druge elemente. Tako kot nastavite element telesa, lahko tudi z barvo ozadja nastavite ozadja drugih elementov. Samo postavite te elemente v slog> / slog> z lastnostjo barve ozadja.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {barva ozadja: oranžna; } p {barva ozadja: rgb (255,0,0); } / style> / head> body> h1> Ta glava dobi oranžno ozadje / h1> p> Ta odstavek dobi rdeče ozadje / p> / body> / html>

2. metoda od 4: Uporaba slike kot ozadja

1. Odprite datoteko HTML v urejevalniku besedil. Mnogi ljudje raje uporabljajo sliko kot ozadje za svojo spletno stran. S tem lahko za ozadje nastavite vzorec, teksturo, fotografijo ali katero koli drugo sliko. V HTML5 morajo biti vsa ozadja nastavljena s CSS (Cascading Style Sheets) znotraj slog> / slog> oznake.
2. Dodajte slog> / slog> oznake v datoteko HTML. V teh oznakah morajo biti navedeni vsi podatki o slogu za vašo stran (vključno z barvo ozadja). Ste že slog> oznak, se pomaknite do tistega dela datoteke.

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

3. Vnesite element "body" znotraj slog> / slog> oznake. Vse, kar spremenite v element "body" v CSS, bo vplivalo na celotno stran.

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

4. Elementu "body" dodajte lastnost "background-image". Pri dodajanju te lastnosti boste potrebovali ime datoteke vaše slike. Poskrbite, da je slika shranjena v isti mapi kot datoteka html (ali dodajte celotno pot do datoteke na spletni strežnik).

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

   • Dobro je vključiti kodo Barva ozadja v primeru, da se slika za ozadje ne naloži.
5. Sloj več slik. Lahko naložite več slik eno na drugo. To je lahko koristno, če imate slike s prozornimi ozadji, ki se med seboj dopolnjujejo.

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

   • Prva slika je na vrhu. Druga slika je pod prvo.

3. metoda od 4: Ustvarite gradient ozadje

1. Uporabite CSS za ustvarjanje gradientnega ozadja. Če iščete nekaj bolj stiliziranega kot enobarvno, vendar ne tako zasedeno kot barvna animacija, poskusite z gradientnim ozadjem. Prelivi so barve, ki se spremenijo v druge enakosti. S pomočjo CSS lahko ustvarite in prilagodite gradient. Preden začnete ustvarjati barvni preliv, morate pridobiti zadostno znanje osnov oblikovanja spletne strani s CSS.
2. Razumevanje standardne skladnje. Pri ustvarjanju gradienta boste potrebovali dva podatka: izhodišče in začetni kot ter barve, med katerimi bo prišlo do prehoda. Izberete lahko več barv, ki se vse prekrivajo, in lahko določite smer ali kot preliva.

   ozadje: linearni gradient (smer / kot, barva1, barva2, barva3 itd.);

3. Ustvarite navpični gradient. Če ne navedete smeri, bo barva potekala od zgoraj navzdol. Različni brskalniki imajo različne različice funkcije gradienta, zato boste morali dodati različne različice kode.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * To je potrebno za zagotovitev, da gradient obsega celotno stran * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / ozadje: -o-linearni gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / ozadje: -moz-linearni gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / ozadje: linearni preliv (# 93B874, # C9DCB9); / * Privzeta sintaksa (mora biti zadnja) * / background-color: # 93B874; / * Dobro je nastaviti barvo ozadja, če se gradient ne naloži * /} / style> / head> body> / body> / html>

4. Ustvari gradient s smerjo. Dodajanje smeri gradienta vam omogoča, da prilagodite način premikanja barve. Upoštevajte, da si bodo različni brskalniki različno razlagali navodila. Vsi bodo prikazali enak barvni preliv.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } body {ozadje: -webkit-linear-gradient (levo, # 93B874, # C9DCB9); / * od leve proti desni * / ozadje: -o-linearni gradient (desno, # 93B874, # C9DCB9); / * konec na desni * / ozadje: -moz-linear-gradient (desno, # 93B874, # C9DCB9); / * konec na desni * / ozadje: linearni gradient (desno, # 93B874, # C9DCB9); / * premakne se na desno stran * * / background-color: # 93B874; / * dobro je nastaviti barvo ozadja, če se gradient ne bo naložil * /} / style> / head> body> / body> / html>

5. Za nastavitev gradienta uporabite druge lastnosti. Z nakloni lahko naredite veliko več.
   • Na primer, ne morete uporabiti več kot dveh barv, temveč za vsako postavite odstotek. S tem lahko določite, koliko prostora bo dobil posamezen barvni segment.

     ozadje: linearni gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Barvam dodajte prosojnost. S tem lahko zblediš barve. Uporabite isto barvo, da iz barve zbledi v nič. Funkcija vam bo všeč rgba () mora uporabiti za označevanje barve. Končna vrednost določa stopnjo preglednosti: 0 za neprozorne in 1 za pregleden.

     ozadje: linearni gradient (desno, rgba (147,184,116.0), rgba (147,184,116.1));

4. način od 4: Nastavite barvno animacijo za ozadje

1. Pomaknite se do slog> v vaši kodi HTML. Če najdete trdno barvo ozadja, vendar ne, poskusite s spreminjanjem barvnih ozadij. V HTML 5 morajo biti barve ozadja definirane s CSS (Cascading Style Sheets). Če s CSS še niste nastavili barve ozadja, preberite razdelek o nastavitvi trdne barve ozadja, preden poskusite s to metodo.
2. Dodajte lastnost animacija do elementa "telo". Dodati boste morali dve različni lastnosti, saj vsak brskalnik zahteva drugačno kodo.

   ! DOCTYPE html> html> head> style> body {-webkit-animacija: izmenjava barv 60s neskončno; animacija: izmenjava barv 60-ih neskončno; } / style> / head> body> / body> / html>

   • -webkit-animacija lastnost je potrebna za brskalnike s sistemom Chrome (Chrome, Opera, Safari). animacija je standard za vse druge brskalnike.
   • izmenjava barv je tisto, kar se v tem primeru imenuje animacija.
   • 60-ih je trajanje (60 sekund) animacije / prehoda. To nastavite tako za spletni komplet kot za privzeto sintakso.
   • neskončno označuje, da se mora animacija ponavljati za nedoločen čas. Če raje zankaste barve in se nato ustavite pri zadnji barvi, lahko ta del izpustite.
3. Dodajte animaciji barve. Zdaj boste s pravilom @keyframes nastavili barve ozadja, ki jih želite prehoditi, in kako dolgo je posamezna barva vidna na strani. Ponovno boste morali dodati več kodiranj za različne brskalnike.

   ! DOCTYPE html> html> head> style> body {-webkit-animacija: izmenjava barv 60s neskončno; animacija: izmenjava barv 60-ih neskončno; } @ -webkit-keyframes barvna zamenjava {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes barvna zamenjava {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

   • Upoštevajte, da sta dve vrstici (@ -webkit-keyframes in @keyframes imajo enake vrednosti za barve ozadja in odstotke. Moral bi ostati enoten, tako da bo izkušnja ostala enaka za vse brskalnike.
   • Odstotki (0%, 25%itd.) predstavljajo skupno trajanje animacije (60-ih). Ko se stran naloži, bo barva ozadja nastavljena na 0% in (# 33FFF3). Ko se predvaja 25% ali 60 sekund animacije, se ozadje preklopi na # 78281F, in tako naprej.
   • Trajanje in barve lahko prilagodite po želji.