Nilalaman

• Upang humakbang
• Paraan 1 ng 4: Pagtatakda ng isang solidong kulay sa background
• Paraan 2 ng 4: Paggamit ng isang larawan bilang isang background
• Paraan 3 ng 4: Lumikha ng isang gradient na background
• Paraan 4 ng 4: Magtakda ng isang kulay ng animasyon bilang wallpaper

Upang maitakda ang background ng isang web page sa HTML, kailangan mo lamang gumawa ng isang maliit na pagbabago sa elemento ng "katawan" sa loob ng style> / style> mga tag Ang mga hakbang ay nakasalalay sa kung paano mo nais ang hitsura ng iyong wallpaper. Alamin kung paano itakda ang background ng iyong website bilang isang solidong kulay, imahe, gradient o kulay na animasyon.

Upang humakbang

Paraan 1 ng 4: Pagtatakda ng isang solidong kulay sa background

1. Buksan ang iyong HTML file sa iyong paboritong text editor. Tulad ng HTML5, ang HTML na katangian na bgcolor> ay hindi na sinusuportahan. Ang kulay ng background, tulad ng lahat ng iba pang mga aspeto ng istilo ng iyong pahina, ay dapat na itakda sa CSS.
2. Idagdag ang style> / style> i-tag ang iyong dokumento. Ang lahat ng data ng istilo para sa iyong pahina (kasama ang kulay sa background) ay dapat na naka-encode sa loob ng mga tag na ito. Mayroon ka bang style> naipahiwatig na ang mga tag, pagkatapos ay maaari mo lamang mag-scroll sa bahaging iyon ng file.

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

3. I-type ang elementong "katawan" sa loob ng style> / style> mga tag Ang anumang babaguhin mo sa elemento ng "katawan" sa CSS ay makakaapekto sa buong pahina.

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

4. Idagdag ang "background-color" na pag-aari sa sangkap na "katawan". Sa kontekstong ito ang isang pagbaybay lamang ng "kulay" ang gagana (hindi: kulay).

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

5. Ilagay ang nais na kulay ng background sa likod ng "background-color". Maaari mo na ngayong ipahiwatig ang pangalan ng isang kulay (berde, asul, ed, atbp.), Gumamit ng mga hexadecimal (hex) na mga code (hal. #000000 para sa itim, # ff0000 para sa pula, atbp.) o sa pamamagitan ng pagta-type sa halaga ng RGB para sa kulay (tulad ng rgb (255,255,0) para sa dilaw). Nasa ibaba ang isang halimbawa sa mga hexadeximal code, ginagawa ang background na kapareho ng wikiHow banner:

   ! DOCTYPE html> html> ulo> istilo> katawan {kulay ng background: # 93B874; } / style> / ulo> katawan> / katawan> / html>

   • Puti: #FFFFFF
   • Banayad na rosas: # FFCCE6
   • Burnt Sienna: #993300
   • Indigo - # 4B0082
   • Lila - # EE82EE
   • Suriin ang w3schools.com HTML Color Picker upang makita ang mga hex code ng anumang kulay na gusto mo.
6. Gumamit ng "background-color" upang maglapat ng mga kulay ng background sa iba pang mga elemento. Tulad ng pagtatakda mo ng elemento ng katawan, maaari mong gamitin ang background-color upang itakda ang mga background ng iba pang mga elemento. Ilagay lamang ang mga elementong iyon sa loob ng style> / style> na may background-color na pag-aari.

   ! DOCTYPE html> html> ulo> istilo> katawan {kulay ng background: # 93B874; } h1 {background-color: orange; } p {background-color: rgb (255,0,0); } / style> / head> body> h1> Ang header na ito ay nakakakuha ng isang orange na background / h1> p> Ang talatang ito ay nakakakuha ng isang pulang background / p> / body> / html>

Paraan 2 ng 4: Paggamit ng isang larawan bilang isang background

1. Buksan ang HTML file sa isang text editor. Mas gusto ng maraming tao na gumamit ng isang imahe bilang isang background para sa kanilang website. Sa pamamagitan nito maaari kang magtakda ng isang pattern, pagkakayari, larawan o anumang iba pang imahe bilang background. Mula sa HTML5, ang lahat ng mga background ay dapat itakda sa CSS (Cascading Style Sheets) sa loob ng style> / style> mga tag
2. Idagdag ang style> / style> mga tag sa iyong HTML file. Lahat ng data ng istilo para sa iyong pahina (kasama ang kulay ng background) ay dapat na ipahiwatig sa loob ng mga tag na ito. Meron ka na ba style> itinakda ang mga tag, mag-scroll sa bahaging iyon ng file.

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

3. I-type ang elementong "katawan" sa loob ng style> / style> mga tag Ang anumang babaguhin mo sa elemento ng "katawan" sa CSS ay makakaapekto sa buong pahina.

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

4. Idagdag ang "background-image" na pag-aari sa "body" na elemento. Kapag idinagdag ang pag-aari na ito kakailanganin mo ang pangalan ng file ng iyong imahe. Tiyaking nai-save ang imahe sa parehong folder tulad ng html file (o idagdag ang buong landas sa file sa iyong web server).

   ! DOCTYPE html> html> ulo> istilo> katawan {background-image: url ("imagename.png"); kulay sa background: # 93B874; } / style> / ulo> katawan> / katawan> / html>

   • Magandang ideya na isama ang code kulay ng background kung sakali hindi maglo-load ang imahe sa background.
5. Mag-layer ng maraming mga imahe. Maaari kang mag-stack ng maraming mga imahe sa tuktok ng bawat isa. Maaari itong maging kapaki-pakinabang kung mayroon kang mga imahe na may mga transparent na background na umakma sa bawat isa kapag na-superimpose.

   ! DOCTYPE html> html> ulo> istilo> katawan {background-image: url ("image1.png"), url ("image2.gif"); kulay sa background: # 93B874; } / style> / ulo> katawan> / katawan> / html>

   • Ang unang imahe ay nasa itaas. Ang pangalawang imahe ay mas mababa sa una.

Paraan 3 ng 4: Lumikha ng isang gradient na background

1. Gumamit ng CSS upang lumikha ng isang gradient na background. Kung naghahanap ka para sa isang bagay na medyo naka-istilo kaysa sa isang solidong kulay, ngunit hindi kasing abala ng isang kulay na animasyon, subukan ang isang gradient na background. Ang mga gradiente ay mga kulay na nagbabago sa iba pang mga pagkakapantay-pantay. Maaari mong gamitin ang CSS upang likhain at ayusin ang iyong gradient. Bago ka magsimulang lumikha ng isang gradient ng kulay, dapat kang makakuha ng sapat na kaalaman sa mga pangunahing kaalaman sa pag-format ng isang web page na may CSS.
2. Maunawaan ang karaniwang sintaks. Kapag lumilikha ng gradient, mayroong dalawang piraso ng impormasyon na kakailanganin mo: ang panimulang punto at ang panimulang anggulo, at ang mga kulay sa pagitan ng kung saan magaganap ang paglipat. Maaari kang pumili ng maraming kulay na magkakapatong, at maaari mong tukuyin ang isang direksyon o isang anggulo para sa gradient.

   background: linear-gradient (direksyon / anggulo, color1, color2, color3, atbp.);

3. Lumikha ng isang gradient na patayo. Kung hindi ka nagpapahiwatig ng isang direksyon, ang kulay ay tatakbo mula sa itaas hanggang sa ibaba. Ang iba't ibang mga browser ay may iba't ibang mga bersyon ng gradient function, kaya kakailanganin mong magdagdag ng iba't ibang mga bersyon ng code.

   ! DOCTYPE html> html> ulo> style> html {min-taas: 100%; / * Kinakailangan ito upang matiyak na ang gradient ay sumasaklaw sa buong pahina * /} katawan {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: linear-gradient (# 93B874, # C9DCB9); / * Default na syntax (dapat na huling) * / background-color: # 93B874; / * Magandang ideya na magtakda ng isang kulay sa background, kung sakaling hindi mag-load ang gradient * /} / style> / ulo> katawan> / katawan> / html>

4. Lumikha ng gradient na may direksyon. Ang pagdaragdag ng isang direksyon sa gradient ay nagbibigay-daan sa iyo upang ayusin ang paraan ng paglipat ng kulay. Tandaan na magkakaiba ang pagbibigay kahulugan ng iba't ibang mga browser ng mga direksyon. Ipapakita nilang lahat ang parehong gradient ng kulay.

   ! DOCTYPE html> html> ulo> style> html {min-taas: 100%; } katawan {background: -webkit-linear-gradient (kaliwa, # 93B874, # C9DCB9); / * mula kaliwa hanggang kanan * / background: -o-linear-gradient (kanan, # 93B874, # C9DCB9); / * magtatapos sa kanan * / background: -moz-linear-gradient (kanan, # 93B874, # C9DCB9); / * magtatapos sa kanan * / background: linear-gradient (hanggang kanan, # 93B874, # C9DCB9); / * gumagalaw sa kanang bahagi * / background-color: # 93B874; / * magandang ideya na magtakda ng isang kulay ng background, kung sakaling hindi mai-load ang gradient * /} / style> / ulo> katawan> / body> / html>

5. Gumamit ng iba pang mga pag-aari upang ayusin ang gradient. Marami kang magagawa sa mga gradient.
   • Halimbawa, hindi mo lamang magagamit ang higit sa dalawang kulay, ngunit maglalagay din ng isang porsyento sa likod ng bawat isa. Sa pamamagitan nito maaari mong ipahiwatig kung gaano karaming puwang ang makukuha ng bawat segment ng kulay.

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

   • Magdagdag ng transparency sa mga kulay. Sa pamamagitan nito maaari mong pag-fade ang mga kulay. Gumamit ng parehong kulay upang mawala mula sa kulay hanggang sa wala. Gustung-gusto mo ang pagpapaandar rgba () dapat gamitin upang ipahiwatig ang kulay. Tinutukoy ng halaga ng pagtatapos ang antas ng transparency: 0 para sa opaque at 1 para sa transparent.

     background: linear gradient (sa kanan, rgba (147,184,116.0), rgba (147,184,116.1));

Paraan 4 ng 4: Magtakda ng isang kulay ng animasyon bilang wallpaper

1. Mag-navigate sa style> sa iyong HTML code. Kung nakakita ka ng isang solidong kulay ng background ngunit hindi, mag-eksperimento sa pagbabago ng mga background ng kulay. Mula sa HTML 5, ang mga kulay sa background ay dapat na tinukoy sa CSS (Cascading Style Sheets). Kung hindi ka pa nakatakda ng isang kulay ng background sa CSS, basahin ang seksyon sa pagtatakda ng isang solidong kulay ng background bago subukan ang pamamaraang ito.
2. Idagdag ang pag-aari animasyon sa elementong "katawan". Kailangan mong magdagdag ng 2 magkakaibang mga pag-aari, dahil ang bawat browser ay nangangailangan ng iba't ibang code.

   ! DOCTYPE html> html> ulo> istilo> katawan {-webkit-animasyon: colorchange 60s infinite; animasyon: colorchange 60s walang hanggan; } / style> / ulo> katawan> / katawan> / html>

   • -webkit-animasyon kinakailangan ang pag-aari para sa mga browser na nakabatay sa Chrome (Chrome, Opera, Safari). animasyon ay ang pamantayan para sa lahat ng iba pang mga browser.
   • pagpapalit ng kulay ang tinatawag na animasyon sa halimbawang ito.
   • 60s ay ang tagal (60 segundo) ng animasyon / paglipat. Tiyaking itakda ito para sa parehong webkit at ang default na syntax.
   • walang hanggan ay nagpapahiwatig na ang animation ay dapat ulitin nang walang katiyakan. Kung mas gusto mong i-loop ang mga kulay at pagkatapos ay huminto sa huling kulay, maaari mong alisin ang bahaging ito.
3. Magdagdag ng mga kulay sa iyong animasyon. Ngayon ay gagamitin mo ang panuntunang @keyframes upang maitakda ang mga kulay sa background na dadaan, pati na rin kung gaano katagal makikita ang bawat kulay sa pahina. Muli, kakailanganin mong magdagdag ng maraming mga pag-encode para sa iba't ibang mga browser.

   ! DOCTYPE html> html> ulo> istilo> katawan {-webkit-animasyon: colorchange 60s infinite; animasyon: colorchange 60s walang hanggan; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / ulo> katawan> / katawan> / html>

   • Tandaan na ang dalawang linya (@ -webkit-keyframes at @keyframes may parehong mga halaga para sa mga kulay sa background at porsyento. Dapat itong manatiling pare-pareho upang ang karanasan ay mananatiling pareho para sa lahat ng mga browser.
   • Ang mga porsyento (0%, 25%, atbp.) kumakatawan sa kabuuang tagal ng animasyon (60s). Kapag naglo-load ang pahina, ang background ay magkakaroon ng kulay na nakatakda sa 0% at (# 33FFF3). Kapag ang 25% o 60 segundo ng pag-play ng animasyon, ang background ay lilipat sa # 78281F, at iba pa.
   • Maaari mong ayusin ang tagal at mga kulay ayon sa ninanais.