Përmbajtje

• Të shkelësh
• Metoda 1 nga 4: Vendosja e një ngjyre solide të sfondit
• Metoda 2 e 4: Përdorimi i një figure si sfond
• Metoda 3 nga 4: Krijoni një sfond gradient
• Metoda 4 nga 4: Vendosni një animacion me ngjyra si sfond

Për të qenë në gjendje të vendosni sfondin e një faqe në internet në HTML, thjesht duhet të bëni një ndryshim të vogël në elementin "trup" brenda elementit stili> / stili> etiketat. Hapat varen nga mënyra se si dëshironi të duket sfondi juaj. Mësoni si ta vendosni sfondin e faqes suaj të internetit si një animacion me ngjyra, imazhe, gradiente ose ngjyra.

Të shkelësh

Metoda 1 nga 4: Vendosja e një ngjyre solide të sfondit

1. Hapni skedarin tuaj HTML në redaktuesin tuaj të preferuar të tekstit. Që nga HTML5, atributi HTML bgcolor> nuk mbështetet më. Ngjyra e sfondit, si të gjitha aspektet e tjera të stilit të faqes tuaj, duhet të vendoset me CSS.
2. Shtoni stili> / stili> etiketon dokumentin tuaj. Të gjitha të dhënat e stilit për faqen tuaj (përfshirë ngjyrën e sfondit) duhet të kodohen brenda këtyre etiketave. A keni stili> etiketat tashmë të treguara, atëherë thjesht mund të lëvizni në atë pjesë të skedarit.

   ! DOCTYPE html> html> kokë> stil> / stil> / kokë> / html>

3. Shtypni elementin "trup" brenda stili> / stili> etiketat. Çdo gjë që ndryshoni në elementin "trup" në CSS do të ndikojë në të gjithë faqen.

   ! DOCTYPE html> html> kokë> stil> trup {} / stil> / kokë> trup>> trup> / html>

4. Shtoni vetinë "background-color" në elementin "body". Në këtë kontekst do të funksionojë vetëm një drejtshkrim i "ngjyrës" (jo: ngjyra).

   ! DOCTYPE html> html> kokë> stil> trup {{background-color:} / style> / kokë> trup> / trup> / html>

5. Vendosni ngjyrën e dëshiruar të sfondit prapa "background-color". Tani mund të tregoni emrin e një ngjyre (jeshile, blu, ed, etj.), përdorni kodet heksadecimale (magji) (p.sh. #000000 për të zezën, # ff0000 për të kuqe, etj.) ose duke shtypur vlerën RGB për ngjyrën (si p.sh. rgb (255,255,0) për të verdhën). Më poshtë është një shembull me kodet heksadeksimale, duke e bërë sfondin të njëjtë me banderolën wikiHow:

   ! DOKTIPI html> html> koka> stili> trupi {background-color: # 93B874; } / style> / head> body> / body> / html>

   • E bardhe: #FFFFFF
   • Rozë e lehtë: # FFCCE6
   • Siena e djegur: #993300
   • Lejla - # 4B0082
   • Vjollcë - # EE82EE
   • Shikoni zgjedhësin e ngjyrave HTML w3schools.com për të gjetur kodet magji të çdo ngjyre që dëshironi.
6. Përdorni "background-color" për të aplikuar ngjyrat e sfondit në elementë të tjerë. Ashtu si vendosni elementin e trupit, ju mund të përdorni ngjyrën e sfondit për të vendosur sfondet e elementeve të tjerë. Thjesht vendosni ato elemente brenda stili> / stili> me vetinë me ngjyrën e sfondit.

   ! DOKTIPI html> html> koka> stili> trupi {background-color: # 93B874; } h1 {sfond-ngjyra: portokalli; } p {sfondi-ngjyra: rgb (255,0,0); } / style> / head> body> h1> Kjo header merr një sfond portokalli / h1> p> Ky paragraf merr një sfond të kuq / p> / body> / html>

Metoda 2 e 4: Përdorimi i një figure si sfond

1. Hapni skedarin HTML në një redaktues teksti. Shumë njerëz preferojnë të përdorin një imazh si sfond për faqen e tyre të internetit. Me këtë ju mund të vendosni një model, strukturë, foto ose ndonjë imazh tjetër si sfond. Nga HTML5, të gjitha sfondet duhet të vendosen me CSS (Sheets Style Cascading) brenda stili> / stili> etiketat.
2. Shtoni stili> / stili> etiketat në skedarin tuaj HTML. Të gjitha të dhënat e stilit për faqen tuaj (përfshirë ngjyrën e sfondit) duhet të tregohen brenda këtyre etiketave. A keni tashmë stili> etiketat e vendosura, lëvizni në atë pjesë të skedarit.

   ! DOCTYPE html> html> kokë> stil> / stil> / kokë> / html>

3. Shtypni elementin "trup" brenda stili> / stili> etiketat. Çdo gjë që ndryshoni në elementin "trup" në CSS do të ndikojë në të gjithë faqen.

   ! DOCTYPE html> html> kokë> stil> trup {} / stil> / kokë> trup>> trup> / html>

4. Shtoni vetinë "background-image" në elementin "body". Kur shtoni këtë pronë do t'ju duhet emri i skedarit të imazhit tuaj. Sigurohuni që imazhi të jetë ruajtur në të njëjtën dosje si skedari html (ose shtoni rrugën e plotë në skedar në serverin tuaj të internetit).

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

   • Ashtë një ide e mirë të përfshini kodin ngjyrë e sfondit vetëm në rast se imazhi i sfondit nuk do të ngarkohet.
5. Shtresa e imazheve të shumëfishta. Mund të vendosni shumë imazhe njëra mbi tjetrën. Kjo mund të jetë e dobishme nëse keni imazhe me sfond transparent që plotësojnë njëra-tjetrën kur mbivendosen.

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

   • Imazhi i parë është në krye. Imazhi i dytë është nën të parin.

Metoda 3 nga 4: Krijoni një sfond gradient

1. Përdorni CSS për të krijuar një sfond gradient. Nëse po kërkoni diçka pak më të stilizuar se një ngjyrë solide, por jo aq e zënë sa një animacion me ngjyra, provoni një sfond gradient. Gradientët janë ngjyra që ndryshojnë në barazitë e tjera. Ju mund të përdorni CSS për të krijuar dhe rregulluar gradientin tuaj. Para se të filloni të krijoni një gradient të ngjyrave, duhet të fitoni njohuri të mjaftueshme mbi bazat e formatimit të një faqe në internet me CSS.
2. Kuptoni sintaksën standarde. Kur krijoni një gradient, do t'ju duhen dy informacione: pika e fillimit dhe këndi i fillimit, dhe ngjyrat midis të cilave do të ndodhë tranzicioni. Ju mund të zgjidhni shumë ngjyra që mbivendosen të gjitha, dhe mund të specifikoni një drejtim ose një kënd për gradientin.

   sfondi: gradient linear (drejtim / kënd, ngjyra1, ngjyra2, ngjyra3, etj.);

3. Krijoni një gradient vertikal. Nëse nuk tregoni një drejtim, ngjyra do të zhvillohet nga lart poshtë. Shfletuesit e ndryshëm kanë versione të ndryshme të funksionit gradient, kështu që do t'ju duhet të shtoni versione të ndryshme të kodit.

   ! DOCTYPE html> html> kokë> stil> html {min-lartësi: 100%; / * Kjo është e nevojshme për të siguruar që gradienti përfshin tërë faqen e trupit * /} {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / sfondi: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / sfondi: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / sfondi: gradient-gradient (# 93B874, # C9DCB9); / * Sintaksa e paracaktuar (duhet të jetë e fundit) * / background-color: # 93B874; / * Ashtë një ide e mirë të vendosni një ngjyrë të sfondit, në rast se gradienti nuk ngarkon * /} / style> / head> body> / body> / html>

4. Krijoni një gradient me drejtim. Shtimi i një drejtimi në gradient ju lejon të rregulloni mënyrën e zhvendosjes së ngjyrës. Vini re se shfletues të ndryshëm do të interpretojnë udhëzimet ndryshe. Ata të gjithë do të tregojnë të njëjtën gradient ngjyrash.

   ! DOCTYPE html> html> kokë> stil> html {min-lartësi: 100%; } body {background: -webkit-linear-gradient (majtas, # 93B874, # C9DCB9); / * nga e majta në të djathtë * / sfondi: -o-linear-gradient (djathtas, # 93B874, # C9DCB9); / * fundi në të djathtë * / sfondi: -moz-linear-gradient (djathtas, # 93B874, # C9DCB9); / * fundi në të djathtë * / sfondi: gradient linear (djathtas, # 93B874, # C9DCB9); / * lëviz në anën e djathtë * / sfondi-ngjyra: # 93B874; / * është një ide e mirë të vendosni një ngjyrë të sfondit, në rast se gradienti nuk do të ngarkohet * /} / style> / head> body> / body> / html>

5. Përdorni veti të tjera për të rregulluar gradientin. Ju mund të bëni shumë më tepër me gradientët.
   • Për shembull, ju jo vetëm që mund të përdorni më shumë se dy ngjyra, por gjithashtu vendosni një përqindje prapa secilës. Me këtë mund të tregoni se sa hapësirë ​​do të marrë secili segment i ngjyrave.

     sfondi: gradient linear (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Shtoni transparencë në ngjyrat. Me këtë ju mund të zbehni ngjyrat. Përdorni të njëjtën ngjyrë për të zbehur nga ngjyra në asgjë. Ju do të doni funksionin rgba () duhet të përdorë për të treguar ngjyrën. Vlera përfundimtare përcakton shkallën e transparencës: 0 për opake dhe 1 për transparente.

     sfondi: gradient linear (djathtas, rgba (147,184,116.0), rgba (147,184,116.1));

Metoda 4 nga 4: Vendosni një animacion me ngjyra si sfond

1. Lundroni te stili> në kodin tuaj HTML. Nëse gjeni një ngjyrë të fortë sfondi, por jo, eksperimentoni me ndryshimin e sfondeve të ngjyrave. Nga HTML 5, ngjyrat e sfondit duhet të përcaktohen me CSS (Sheets Style Cascading). Nëse nuk keni vendosur kurrë një ngjyrë sfondi me CSS, lexoni pjesën për vendosjen e një ngjyre të fortë sfondi përpara se të provoni këtë metodë.
2. Shto pronën animacion tek elementi "trup". Ju do të duhet të shtoni 2 veti të ndryshme, pasi secili shfletues kërkon kod të ndryshëm.

   ! DOCTYPE html> html> head> style> body {-webkit-animacion: ndryshimi i ngjyrave 60s pafund; animacion: ndërrimi i ngjyrave 60-ta e pafund; } / style> / head> body> / body> / html>

   • -ebekit-animacion prona kërkohet për shfletuesit e bazuar në Chrome (Chrome, Opera, Safari). animacion është standardi për të gjithë shfletuesit e tjerë.
   • ndërrimi i ngjyrave është ajo që quhet animacion në këtë shembull.
   • Vitet '60 është kohëzgjatja (60 sekonda) e animacionit / tranzicionit. Sigurohuni që ta vendosni këtë si për webkit ashtu edhe për sintaksën e paracaktuar.
   • i pafund tregon se animacioni duhet të përsëritet për një kohë të pacaktuar. Nëse preferoni të hapni ngjyrat dhe më pas të ndaleni në ngjyrën e fundit, mund ta hiqni këtë pjesë.
3. Shtoni ngjyra në animacionin tuaj. Tani do të përdorni rregullin @keyframes për të vendosur ngjyrat e sfondit që duhet të kalojnë, si dhe sa kohë mund të shihet secila ngjyrë në faqe. Përsëri, do t'ju duhet të shtoni kodime të shumta për shfletuesit e ndryshëm.

   ! DOCTYPE html> html> head> style> body {-webkit-animacion: ndryshimi i ngjyrave 60s pafund; animacion: ndërrimi i ngjyrave 60-ta e pafund; } @ -webkit-keyframes ndryshimi i ngjyrave {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes ndryshimi i ngjyrave {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / stili> / koka> trupi> / trupi> / html>

   • Vini re se dy linjat (@ -ebekit-korniza kryesore dhe @ keyframes kanë të njëjtat vlera për ngjyrat dhe përqindjet e sfondit. Duhet të mbetet uniforme në mënyrë që përvoja të mbetet e njëjtë për të gjithë shfletuesit.
   • Përqindjet (0%, 25%, etj.) paraqesin kohëzgjatjen totale të animacionit (Vitet '60) Kur faqja të ngarkohet, sfondi do të ketë vendosur ngjyrën 0% dhe (# 33FFF3) Kur të ketë luajtur 25% ose 60 sekonda të animacionit, sfondi do të kalojë në # 78281F, dhe kështu me radhë.
   • Kohëzgjatjen dhe ngjyrat mund t’i rregulloni sipas dëshirës.