Iz ovog člana naučit ćete kako promijeniti boju pozadine web stranice, ako uređujete svoj HTML kod.

Korake

Metoda 1 od 4:

Kako se pripremiti za uređivanje HTML koda

jedan. Odredite boju pozadine koju želite koristiti. U HTML-u su boje postavljene kodovima koji određuju razne nijanse. Koristite besplatne online W3Schools HTML alat za viljuškar u boji da biste pronašli potrebe željenih boja:

Idi na stranicu https: // W3SChools.COM / BOJE / COLORE_PICKER.ASP U web pretraživaču.
Odaberite osnovnu boju koju želite koristiti u odjeljku "Izaberite boju".
Odaberite nijansu s desne strane stranice.
Zabilježite kôd koji će biti prikazan desno od odabrane hladovine.

2. Otvorite HTML datoteku u uređivaču teksta. Zapamtite da u HTML5 atributima Više nije podržan. Zbog toga su pozadinske postavke i druge postavke stila stranice postavljene pomoću CSS-a.

HTML dokument može se otvoriti u notepad ++ ili notepad (Windows), kao i u TexteDit ili BDEIT (MAC).

3. Dodajte HTML zaglavlje u dokument. Svi parametri stila stranice, uključujući boju pozadine, moraju biti između oznaka :

4. Kreirajte prazan niz između oznaka stila. Na ovoj liniji, koja bi trebala biti ispod oznake I preko oznake , Unijet ćete potrebne informacije.

6. Dodajte element "telo". Unesite sljedeći kôd između oznaka :

Tijelo {}

Sve što će biti zaključeno unutar "tijela" elementa "u CSS-u utjecati na cijelu stranicu.

Preskočite ovaj korak ako želite stvoriti gradijentnu pozadinu.

Metoda 2 od 4:

Kako stvoriti monofonsku pozadinu

jedan. Pronađite HTML zaglavlje. Treba biti na vrhu dokumenta.

2. Dodajte nekretninu "Boja pozadine" u elementu "Tijelo". Ući Boja pozadine: U kovrčavim nosačima unutar elementa "telo". Sljedeći kôd treba ispasti:

Tijelo {Boja pozadine:}

Imajte na umu da je u ovom kodu potrebno koristiti riječ "boja", a ne "boja".

3. Dodajte željenu boju pozadine u nekretninu "Boja pozadine". Desno od "Boja pozadine:" Unesite numerički kod odabrane boje, a zatim uđite u zarez (-). Na primjer, da biste napravili pozadinu stranica ružičaste, napišite sljedeći kod:

Boje od tijela {pozadina: # D24DFF-}

4. Pregledajte informacije unutar oznake "Style". U ovoj fazi, zaglavlje vašeg HTML dokumenta trebao bi izgledati ovako:

 {Boja pozadine: # D24DFF}

pet. Upotrijebite "boju pozadine" za postavljanje pozadine boje drugih elemenata (zaglavlja, odlomka i slično). Na primjer, za podešavanje boje pozadine glavnog zaglavlja (

) ili odlomak (
), napišite sljedeći kod:

 {pozadina - boja: # 93b874-} H1 {Boja pozadine: # 00B33C-} P {boja pozadine: #ffffff) -}Naslov
 Na zelenoj pozadiniStavak
 na bijeloj pozadini

Metoda 3 od 4:

Kako stvoriti gradijentnu pozadinu

jedan. Pronađite HTML zaglavlje. Treba biti na vrhu dokumenta.

2. Sjetite se glavne sintakse ovog procesa. Da biste stvorili gradijent, morate znati dvije količine: početnu tačku / ugao i brojne boje koje će se pomaknuti u drugu. Možete odabrati nekoliko boja kako bi išli jedni drugima; možete odrediti i smjer ili ugao tranzicije.

Pozadina: linearni gradijent (smjer / ugao, boja1, boja2, boja3 i tako dalje)-

3. Stvoriti vertikalni gradijent. Ako ne navedete smjer, gradijent će otići odozgo prema dolje. Da biste stvorili takav gradijent, unesite sljedeći kôd između oznaka :

HTML {Min-Visina: 100% -} Bodstvo {pozadina: -webkit-linear-gradijent (# 93b874, # c9dcb9) -Background: -o-linear-gradijent (# 93B874, # C9DCB9) -Background: -Moz-linear -Gradient (# 93b874, # C9DCB9) -Background: linearni gradijent (# 93b874, # c9dcb9) -Backline-boja: # 93b874-}

U raznim preglednicima, gradijentna funkcija se provodi drugačije, tako da morate dodati više verzija sa više koda.

4. Kreirajte režirani gradijent. Ako ne želite da gradijent ide vertikalno, navedite smjer tranzicije boja. Da biste to učinili, unesite sljedeći kôd između oznaka :

HTML {Min-Visina: 100% -} Bodstvo {pozadina: -Webkit-linearni gradijent (lijevo, # 93bb9, # C9DCB9) -Background: -o-linearni gradijent (desno, # 93B874, # C9DCB9) -Moz-linearni gradijent (desno, # 93B874, # C9DCB9) -Background: linearni gradijent (na desno, # 93B874, # C9DCB9) - Boja: # 93B874-}

Ako želite, zaustavite riječi "lijevo" (lijevo) i "desno" (desno) za eksperimentiranje s različitim smjerovima gradijenta.

pet. Koristite ostale svojstva za postavljanje gradijenta. S njim možete učiniti više nego što se čini.

Na primjer, nakon svake boje možete unijeti broj u postotak. Dakle, navedite koji će prostor zauzimati svaki segment boja. Evo primjera koda s takvim parametrima:

Pozadina: linearni gradijent (# 93B874 10%, # C9DCB9 70%, # 000000 90%)-

Dodajte transparentnost u boju. U ovom slučaju postepeno će izblijediti. Da bi se postigao efekt prigušenja, koristite istu boju. Da biste postavili boju, trebat će vam funkcija Rgba (). Posljednja vrijednost će odrediti transparentnost: 0 - neprozirna boja i jedan - Prozirna boja.

Pozadina: linearni gradijent (na desno, RgBA (147.184,116,0), RGBA (147,184,116,1)))-

6. Pogledajte kod. Kodeks za stvaranje gradijenta u boji kao pozadinskih web stranica izgledat će nešto takvo:

 {min visina: 100% -} Bodstvo {pozadina: -webkit-linearni gradijent (lijevo, # 93bb94, # C9DCB9) -Background: -O-linearni gradijent (desno, # 93B874, # C9DCB9) - Moz-linearni gradijent (desno, # 93b874, # C9DCB9) -Background: linearni gradijent (na desno, # 93b874, # c9dcb9) - boja: # 93b874-}

Metoda 4 od 4:

Kako stvoriti promjenjivu pozadinu

jedan. Pronađite HTML zaglavlje. Treba biti na vrhu dokumenta.

2. Dodajte svojstvo animacije na element "Tijelo". Unesite sljedeći kôd nakon "tijela {" i na završnu narukvicu:

-WebKit-Animacija: Colorchange 60s Infinite-Animacija: Colorchange 60S Infinite-

Gornja linija teksta dizajnirana je za preglednike na bazi hroma, a donji redak teksta - za ostale preglednike.

3. Dodajte boje u nekretninu "Animacija". Koristite pravilo "@kekeframes" da biste postavili pozadinske boje koje će se ciklično promijeniti, kao i vrijeme tokom koje će svaka boja biti prikazana na stranici. Ne zaboravite unijeti drugačiji kôd za razne preglednike. Unesite sljedeći kôd ispod završne narukvice karoserije:

@ -Webkit-keyFrames colorchange {0fffff3-} 25% {pozadina: # 78281F-} 50% {pozadina: # 117A65-} 75% {pozadina: # DC7633-} 100% {pozadina: # 9B59B6 -}} @ KeyFrames Colorechange {0fffff3-} 25% {Pozadina: # 78281F-} 50% {Pozadina: # 117A65-} 75% {Pozadina: # DC7633-} 100% {pozadina: # 9B59B6 -}}

Imajte na umu da dva pravila (@ -Webkit-keyframes i @Keyframes) imaju iste boje i interesovanje. To se radi kako bi se promijenila pozadina ispravno radila u bilo kojem pretraživaču.

Kamata (0%, 25% I tako dalje) navesti udio vremena (60 S). Kad se stranica učita, njegova pozadina bit će boja # 33fff3. Kada se 15 ° C (25% od 60 s) pozadina promijeni u boju # 7821F itd.

Promijenite vrijeme i boju tako da odgovaraju željenom rezultatu.

4. Pogledajte kod. Kôd za stvaranje promjenjive pozadine trebao bi izgledati ovako:

 {-Webkit-animacija: colorchange 60s beskonačno-animacija: colorchange 60s infinite -} @ - WebKit-keyframes colorchange {0fffff3-} 25% {pozadina: # 78281F-} 50% {pozadina: # 117A65- } 75% {Pozadina: # DC7633-} 100% {Pozadina: # 9B59B6 -}} KeyFrames Colorechange {0ffff3-} 25% {pozadina: # 78281F-} 50% {pozadina: # 117A65- } 75% {Pozadina: # DC7633-} 100% {Pozadina: # 9B59B6-}}

Savjeti

Ako želite koristiti glavne boje u HTML kodu, možete unijeti imena boja (bez simbola #), a ne njihovih numeričkih kodova. Na primjer, stvoriti narandžastu pozadinu, unesite Boja pozadine: narandžasta-.
Kao web stranica možete instalirati slika.

Upozorenja

Provjerite promjene napravljene na kodu web stranice prije objavljivanja.

Korake

) ili odlomak (), napišite sljedeći kod:

Naslov

Savjeti

Upozorenja

) ili odlomak (
), napišite sljedeći kod: