Sadržaj

• Kročiti
• Metoda 1 od 4: Postavljanje pune boje pozadine
• Metoda 2 od 4: Korištenje slike kao pozadine
• Metoda 3 od 4: Stvaranje gradijentne pozadine
• Metoda 4 od 4: Postavite animaciju u boji kao pozadinu

Da biste mogli postaviti pozadinu web stranice u HTML-u, samo trebate unijeti malu promjenu u element "body" unutar stil> / stil> oznake. Koraci ovise o tome kako želite da pozadina izgleda. Naučite kako postaviti pozadinu web stranice kao jednobojnu, slikovnu, gradijentnu ili animaciju u boji.

Kročiti

Metoda 1 od 4: Postavljanje pune boje pozadine

1. Otvorite HTML datoteku u svom omiljenom uređivaču teksta. Od HTML5 HTML atribut bgcolor> više nije podržan. Boja pozadine, kao i svi drugi stilski aspekti vaše stranice, mora se postaviti s CSS-om.
2. Dodajte stil> / stil> označava vaš dokument. Svi podaci o stilu za vašu stranicu (uključujući boju pozadine) trebaju biti kodirani unutar ovih oznaka. Imate li stil> već označene oznake, a zatim se možete jednostavno pomaknuti do tog dijela datoteke.

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

3. Upišite element "body" unutar stil> / stil> oznake. Sve što promijenite u element "body" u CSS-u utjecat će na cijelu stranicu.

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

4. Dodajte svojstvo "background-color" elementu "body". U tom će kontekstu raditi samo jedan pravopis "boja" (ne: boja).

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

5. Postavite željenu boju pozadine iza "background-color". Sada možete navesti naziv boje (zeleno, plava, izditd.), koristite heksadecimalne (heksadecimalne) kodove (npr. #000000 za crno, # ff0000 za crvenu itd.) ili upisivanjem RGB vrijednosti za boju (kao što je rgb (255,255,0) za žutu). Ispod je primjer sa heksadeksimalnim kodovima, čineći pozadinu jednakom kao natpis wikiHow:

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

   • Bijela: #FFFFFF
   • Svijetlo ružičasta: # FFCCE6
   • Izgorjela Sienna: #993300
   • Indigo - # 4B0082
   • Ljubičica - # EE82EE
   • Pogledajte w3schools.com HTML birač boja kako biste pronašli hex kodove bilo koje boje koju želite.
6. Upotrijebite "background-color" za primjenu boja pozadine na druge elemente. Baš kao što ste postavili element tijela, možete koristiti boju pozadine za postavljanje pozadine ostalih elemenata. Samo stavite te elemente u stil> / stil> sa svojstvom background-color.

   ! DOCTYPE html> html> glava> stil> tijelo {background-color: # 93B874; } h1 {boja pozadine: narančasta; } p {pozadina-boja: rgb (255,0,0); } / style> / head> body> h1> Ovo zaglavlje dobiva narančastu pozadinu / h1> p> Ovaj odlomak dobiva crvenu pozadinu / p> / body> / html>

Metoda 2 od 4: Korištenje slike kao pozadine

1. Otvorite HTML datoteku u uređivaču teksta. Mnogi ljudi radije koriste sliku kao pozadinu svoje web stranice. Ovim možete postaviti uzorak, teksturu, fotografiju ili bilo koju drugu sliku kao pozadinu. Od HTML5, sve pozadine moraju biti postavljene sa CSS (Cascading Style Sheets) unutar stil> / stil> oznake.
2. Dodajte stil> / stil> oznake u vašu HTML datoteku. Svi podaci o stilu za vašu stranicu (uključujući boju pozadine) trebaju biti navedeni unutar ovih oznaka. Jeste li već stil> oznake, pomaknite se do tog dijela datoteke.

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

3. Upišite element "body" unutar stil> / stil> oznake. Sve što promijenite u element "body" u CSS-u utjecat će na cijelu stranicu.

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

4. Dodajte svojstvo "background-image" elementu "body". Prilikom dodavanja ovog svojstva trebat će vam naziv datoteke vaše slike. Provjerite je li slika spremljena u istu mapu kao i html datoteka (ili dodajte puni put do datoteke na vaš web poslužitelj).

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

   • Dobro je uključiti kod boja pozadine samo u slučaju da se pozadinska slika ne učita.
5. Sloj više slika. Možete slagati više slika jednu na drugu. To može biti korisno ako imate slike s prozirnom pozadinom koje se nadopunjuju kada se nalože.

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

   • Prva slika je na vrhu. Druga slika je ispod prve.

Metoda 3 od 4: Stvaranje gradijentne pozadine

1. Koristite CSS za stvaranje gradijentne pozadine. Ako tražite nešto malo više stilizirano od jednobojne, ali ne toliko zauzeto kao animacija u boji, isprobajte gradijentnu pozadinu. Gradijenti su boje koje se mijenjaju u druge jednakosti. CSS možete koristiti za stvaranje i podešavanje gradijenta. Prije nego što započnete s izradom gradijenta boje, trebali biste steći dovoljno znanja o osnovama oblikovanja web stranice s CSS-om.
2. Razumijevanje standardne sintakse. Prilikom stvaranja gradijenta potrebne su vam dvije informacije: početna točka i početni kut te boje između kojih će se prijelaz dogoditi. Možete odabrati više boja koje se sve preklapaju, a možete odrediti smjer ili kut za gradijent.

   pozadina: linearni gradijent (smjer / kut, boja1, boja2, boja3 itd.);

3. Stvorite vertikalni gradijent. Ako ne navedete smjer, boja će se prikazivati ​​od vrha do dna. Različiti preglednici imaju različite verzije funkcije gradijenta, pa ćete morati dodati različite verzije koda.

   ! DOCTYPE html> html> head> style> html {min-visina: 100%; / * To je potrebno kako bi se osiguralo da se gradijent proteže na cijeloj stranici * /} tijelo {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / pozadina: -o-linearni-gradijent (# 93B874, # C9DCB9); / * Opera 11.1+ * / pozadina: -moz-linearni gradijent (# 93B874, # C9DCB9); / * Firefox 3.6+ * / pozadina: linearni gradijent (# 93B874, # C9DCB9); / * Zadana sintaksa (mora biti zadnja) * / background-color: # 93B874; / * Dobro je postaviti boju pozadine, u slučaju da se gradijent ne učita * /} / style> / head> body> / body> / html>

4. Stvorite gradijent s pravcem. Dodavanje smjera gradijentu omogućuje vam podešavanje načina na koji se boja mijenja. Imajte na umu da će različiti preglednici različito tumačiti upute. Svi će pokazati isti gradijent boje.

   ! DOCTYPE html> html> head> style> html {min-visina: 100%; } tijelo {pozadina: -webkit-linearni gradijent (lijevo, # 93B874, # C9DCB9); / * slijeva udesno * / pozadina: -o-linearni gradijent (desno, # 93B874, # C9DCB9); / * kraj desno * / pozadina: -moz-linearni gradijent (desno, # 93B874, # C9DCB9); / * kraj desno * / pozadina: linearni gradijent (udesno, # 93B874, # C9DCB9); / * pomiče se na desnu stranu * / background-color: # 93B874; / * dobra je ideja postaviti boju pozadine, u slučaju da se gradijent neće učitati * /} / style> / head> body> / body> / html>

5. Koristite druga svojstva za podešavanje gradijenta. Puno više možete napraviti s gradijentima.
   • Na primjer, ne samo da možete koristiti više od dvije boje, već i postaviti postotak iza svake. Ovim možete naznačiti koliko će prostora dobiti svaki segment boje.

     pozadina: linearni gradijent (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Dodajte prozirnost bojama. Ovim možete izblijedjeti boje. Upotrijebite istu boju za prelazak iz boje u ništa. Svidjet će vam se funkcija rgba () mora koristiti za označavanje boje. Krajnja vrijednost određuje stupanj prozirnosti: 0 za neprozirne i 1 za prozirne.

     pozadina: linearni gradijent (udesno, rgba (147,184,116.0), rgba (147,184,116.1));

Metoda 4 od 4: Postavite animaciju u boji kao pozadinu

1. Dođite do stil> u vašem HTML kodu. Ako pronađete solidnu boju pozadine, ali ne, eksperimentirajte s promjenom pozadine boje. Iz HTML-a 5, boje pozadine moraju se definirati CSS-om (kaskadnim tablicama stilova). Ako nikada niste postavili boju pozadine s CSS-om, pročitajte odjeljak o postavljanju pune boje pozadine prije nego što isprobate ovu metodu.
2. Dodajte svojstvo animacija na element "tijelo". Morat ćete dodati 2 različita svojstva, jer svaki preglednik zahtijeva drugačiji kod.

   ! DOCTYPE html> html> head> style> body {-webkit-animacija: razmjena boja 60-ih beskonačno; animacija: razmjena boja 60-ih beskonačno; } / style> / head> body> / body> / html>

   • -webkit-animacija svojstvo je potrebno za preglednike temeljene na Chromeu (Chrome, Opera, Safari). animacija je standard za sve ostale preglednike.
   • izmjena boja je ono što se u ovom primjeru naziva animacijom.
   • 60-ih je trajanje (60 sekundi) animacije / prijelaza. Obavezno postavite ovo i za webkit i za zadanu sintaksu.
   • beskonačno označava da bi se animacija trebala ponavljati unedogled. Ako radije petljate boje, a zatim se zaustavite na posljednjoj boji, ovaj dio možete izostaviti.
3. Dodajte animaciji boje. Sada ćete pomoću pravila @keyframes postaviti boje pozadine kroz koje treba proći, kao i koliko dugo se svaka boja može vidjeti na stranici. Opet, morat ćete dodati više kodiranja za razne preglednike.

   ! DOCTYPE html> html> head> style> body {-webkit-animacija: razmjena boja 60-ih beskonačno; animacija: izmjena boja 60-ih beskonačno; } @ -webkit-keyframes promjena boje {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes promjena boje {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

   • Imajte na umu da su dva retka (@ -webkit-keyframes i @keyframes imaju iste vrijednosti za boje pozadine i postotke. Trebao bi ostati ujednačen tako da iskustvo ostane isto za sve preglednike.
   • Postoci (0%, 25%itd.) predstavljaju ukupno trajanje animacije (60-ih). Kad se stranica učita, boja pozadine bit će postavljena na 0% i (# 33FFF3). Kada se reproducira 25% ili 60 sekundi animacije, pozadina će prijeći u # 78281F, i tako dalje.
   • Trajanje i boje možete prilagoditi po želji.