ดาวน์โหลดบทความดาวน์โหลดบทความX
บทความนี้ร่วมเขียนโดย Jessica Andzouana หนึ่งในผู้ร่วมเขียนบทความของเรา ผู้ร่วมเขียนบทความของเราจะทำงานร่วมกับบรรณาธิการอย่างใกล้ชิด เพื่อความมั่นใจว่าบทความนั้นถูกต้องและมีเนื้อหาครอบคลุมมากที่สุด
บทความนี้ถูกเข้าชม 58,152 ครั้ง
บทความวิกิฮาวนี้จะแนะนำวิธีการเปลี่ยนสีพื้นหลังของหน้าเว็บ โดยแก้ไขโค้ด HTML
ขั้นตอน
เลือกสีพื้นหลังที่จะใช้. สี HTML จะกำหนดโดยโค้ดตามเฉด คุณใช้ W3Schools HTML color picker หาโค้ดของสีที่ต้องการได้ฟรี- เข้าเว็บ https://www.w3schools.com/colors/colors_picker.asp ในเบราว์เซอร์ของคอม
- คลิกสีหลัก (base color) ที่จะใช้ ในหัวข้อ "Pick a Color"
- เลือกเฉดสีเพิ่มเติมทางขวาของหน้า
- จดหมายเลขโค้ดทางขวาของเฉดสีไว้
เปิดไฟล์ HTML ในโปรแกรม text editor ที่ถนัด. ตั้งแต่ HTML5 จะใช้ HTML attribute <bgcolor> ไม่ได้แล้ว ถ้าจะเปลี่ยนสีพื้นหลังกับปรับแต่งสไตล์อื่นๆ ของหน้าเว็บ ต้องใช้ CSS แทน[1]- คุณใช้ Notepad++ หรือ Notepad ในคอม Windows ก็ได้ ส่วน Mac ให้แก้ไขโค้ดใน TextEdit หรือ BBEdit
ใส่ header ของ "html" ในเอกสาร. โค้ดกำหนดสไตล์ทั้งหมดของหน้าเว็บนั้น (รวมถึงสีพื้นหลัง) ต้องอยู่กลางแท็ก<style></style><!DOCTYPE html><html><head><style></style> </head></html>
ต้องมีบรรทัดว่างคั่นกลางแท็ก "style". ต้องมีบรรทัดไว้ใส่ข้อมูล ล่างแท็ก<style>แต่เหนือแท็ก</style>
ใส่ "body" element. พิมพ์โค้ดต่อไปนี้กลางแท็ก<style></style>body { }
- อะไรก็ตามที่ใส่ในส่วน "body" ของ CSS จะส่งผลต่อหน้าเว็บนั้นทั้งหน้า
- ให้ข้ามขั้นตอนนี้ไป ถ้าอยากได้พื้นหลังสีเหลือบ
โฆษณา
หา "html" header ในเอกสาร. ปกติจะอยู่ด้านบนของเอกสาร
ใส่คุณสมบัติ "background-color" ในส่วน "body". พิมพ์background-color:กลางวงเล็บ body เท่านี้ก็ได้โค้ด "body" ตามที่เห็นด้านล่างbody { background-color: }
- ในกรณีนี้ ต้องสะกดว่า "color" เท่านั้น ห้ามพิมพ์ว่า "colour"
กำหนดสีพื้นหลังที่ต้องการในคุณสมบัติ "background-color". โดยพิมพ์หมายเลขโค้ดของสีที่เลือก ตามด้วย semicolon (;) ข้าง "background-color:" เช่น ถ้าจะตั้งพื้นหลังสีชมพู ให้พิมพ์ว่าbody { background-color: #d24dff;}
ตรวจทานข้อมูล "style". ถึงตอนนี้ header ของเอกสาร HTML ก็จะออกมาประมาณนี้<!DOCTYPE html><html><head><style>body {background-color: #d24dff}</style></head></html>
ใช้ "background-color" เพื่อใส่สีพื้นหลังให้ element อื่นๆ. พอตั้งค่า body element แล้ว ให้ใช้ "background-color" กำหนดสีพื้นหลังของ element อื่นๆ ด้วย เช่น header, paragraph และอื่นๆ เช่น ใส่สีพื้นหลังให้ header หลัก (<h1>) หรือ paragraph (<p>) โค้ดที่ได้ก็จะออกมาประมาณนี้[2]<!DOCTYPE html><html><head><style>body { background-color: #216fdb;}h1 { background-color: #00b33c;}p { background-color: #FFFFFF);}</style></head><body><h1>Header with Green Background</h1><p>Paragraph with white background</p></body></html>
โฆษณา
หา "html" header ของเอกสาร. ปกติจะอยู่ทางด้านบนของเอกสาร
รู้จัก syntax พื้นฐานของขั้นตอนนี้. เวลาจะสร้างสีเหลือบ แปลว่าต้องใช้ข้อมูล 2 ส่วน คือจุดเริ่มต้น/ทำมุม และสีที่จะเหลือบเชื่อมต่อกัน คุณเลือกได้หลายสีที่อยากให้เหลือบไปมา และกำหนดทิศทางหรือมุมการเหลือบได้[3]background: linear-gradient(direction/angle, color1, color2, color3, etc.);
ทำสีเหลือบแนวตั้ง. ถ้าไม่กำหนดทิศทางให้สีเหลือบ ก็จะเป็นการเหลือบจากบนลงล่าง วิธีกำหนดสีเหลือบก็คือใช้โค้ดต่อไปนี้ โดยใส่ไว้กลางแท็ก<style></style>html { min-height: 100%; }body { background: -webkit-linear-gradient(#216fdb, #C9DCB9); background: -o-linear-gradient(#216fdb, #C9DCB9); background: -moz-linear-gradient(#216fdb, #C9DCB9); background: linear-gradient(#216fdb, #C9DCB9); background-color: #216fdb; }
- แต่ละเบราว์เซอร์ก็มีวิธีกำหนดและใช้งานฟังก์ชั่นสีเหลือบนี้แตกต่างกันไป เพราะงั้นก็ต้องมีโค้ดหลายๆ เวอร์ชั่น
ทำสีเหลือบในทิศทางอื่น. ถ้าอยากได้สีเหลือบทิศทางอื่น ไม่เหลือบลงมาตรงๆ ทื่อๆ ก็ให้กำหนดทิศทางการเหลือบ เพื่อเปลี่ยนลักษณะการเหลือบของสี โดยพิมพ์โค้ดต่อไปนี้กลางแท็ก<style></style>[4]html { min-height: 100%;}body { background: -webkit-linear-gradient(left, #216fdb, #C9DCB9); background: -o-linear-gradient(right, #216fdb, #C9DCB9); background: -moz-linear-gradient(right, #216fdb, #C9DCB9); background: linear-gradient(to right, #216fdb, #C9DCB9); background-color: #216fdb; }
- ลองใช้แท็ก "left" (ซ้าย) และ "right" (ขวา) ดู เพื่อลองเหลือบในทิศทางต่างๆ จนได้สีเหลือบแบบที่ต้องการ
ใช้คุณสมบัติหรือ properties อื่นปรับแต่งสีเหลือบ. คุณตั้งค่าสีเหลือบได้อีกมากมายหลายแบบ- เช่น ทำสีเหลือบได้มากกว่า 2 สีขึ้นไป แถมยังกำหนดเปอร์เซ็นต์ของแต่ละสีได้ด้วย จะได้เลือกว่าอยากให้สีไหนกินพื้นที่มากกว่า ตัวอย่างสีเหลือบแบบที่ว่าก็คือ
background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
- เช่น ทำสีเหลือบได้มากกว่า 2 สีขึ้นไป แถมยังกำหนดเปอร์เซ็นต์ของแต่ละสีได้ด้วย จะได้เลือกว่าอยากให้สีไหนกินพื้นที่มากกว่า ตัวอย่างสีเหลือบแบบที่ว่าก็คือ
- 6ทำสีโปร่งใส หรือทำให้สีจางลง โดยใช้สีเดียวกัน แต่เหลือบจากสีเข้มปกติไปจนถึงไม่มีสี ต้องใช้ฟังก์ชั่น rgba() กำหนดสี ค่าด้านท้ายจะเป็นตัวกำหนดความโปร่งใส คือ แทนสีทึบ และ 1 แทนโปร่งใส
background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
ตรวจทานโค้ดทั้งหมด. โค้ดกำหนดสีเหลือบของพื้นหลังเว็บไซต์ที่ได้ จะออกมาหน้าตาประมาณนี้<!DOCTYPE html><html><head><style>html { min-height: 100%;} body { background: -webkit-linear-gradient(left, #216fdb, #C9DCB9); background: -o-linear-gradient(right, #216fdb, #C9DCB9); background: -moz-linear-gradient(right, #216fdb, #C9DCB9); background: linear-gradient(to right, #216fdb, #C9DCB9); background-color: #216fdb; }</style></head><body></body></html>
โฆษณา
หา "html" header ของเอกสาร. ปกติจะอยู่ทางด้านบนของเอกสาร
ใส่คุณสมบัติ animation ให้ "body" element. พิมพ์โค้ดต่อไปนี้ในที่ว่างล่างวงเล็บเปิด "body {" แต่เหนือวงเล็บปิด[5]-webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite;
- ข้อความบรรทัดบนสุดนั้นสำหรับเบราว์เซอร์ตระกูล Chromium ส่วนข้อความบรรทัดล่างสุดสำหรับเบราว์เซอร์อื่นๆ
ใส่สีให้แอนิเมชั่น. คราวนี้เราจะมาใช้กฎ @keyframes กำหนดสีพื้นหลังให้เปลี่ยนแบบวนไป รวมถึงกำหนดว่าแต่ละสีจะอยู่นานแค่ไหน ย้ำว่าต้องใช้ entries แยกกันสำหรับแต่ละเบราว์เซอร์ ให้ใส่โค้ดต่อไปนี้ล่างวงเล็บปิดของ "body"[6]@-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;}}
- จะเห็นว่า 2 กฎนี้ (@-webkit-keyframes กับ @keyframes เป็นสีพื้นหลังเดียวกันและเปอร์เซ็นต์เท่ากัน เพราะงั้นต้องคงค่านี้ไว้ จะได้เหมือนกันในทุกเบราว์เซอร์
- เปอร์เซ็นต์ (เช่น 0%, 25% เป็นต้น) ก็คือความยาวของแอนิเมชั่นโดยรวม (60s) พอหน้าเว็บโหลดขึ้นมา สีของพื้นหลังจะอยู่ที่ 0% (#33FFF3) พอแอนิเมชั่นเล่นไปได้ 25% ของ 60 วินาที พื้นหลังก็จะเปลี่ยนเป็น #7821F แบบนี้ไปเรื่อยๆ
- คุณปรับระยะเวลากับสีได้ตามต้องการเลย
ตรวจทานโค้ด. โค้ดสำหรับทำสีพื้นหลังแบบเปลี่ยนสีได้จะออกมาหน้าตาประมาณนี้<!DOCTYPE html><html><head><style>body { -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite;}@-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></head><body></body></html>
โฆษณา
เคล็ดลับ
- ถ้าอยากใช้สีพื้นธรรมดา โดยกำหนดในโค้ด HTML ให้พิมพ์ชื่อสีแบบไม่มีเครื่องหมาย "#" (pound sign) แทนโค้ดสี HTML เช่น ถ้าจะใช้พื้นหลังสีส้ม ก็ให้พิมพ์
background-color: orange; - หรือจะใส่รูปเป็นพื้นหลังเว็บไซต์โดยใช้โค้ด HTML ก็ได้
โฆษณา
คำเตือน
- อย่าลืมทดสอบโค้ดทุกครั้งที่เปลี่ยนแปลงอะไรในเว็บ ก่อนเผยแพร่ (publish) ให้เว็บกลับมาออนไลน์อีกครั้ง
โฆษณา
ข้อมูลอ้างอิง
เกี่ยวกับวิกิฮาวนี้
Jessica Andzouana
บทความนี้ร่วมเขียนโดย Jessica Andzouana หนึ่งในผู้ร่วมเขียนบทความของเรา ผู้ร่วมเขียนบทความของเราจะทำงานร่วมกับบรรณาธิการอย่างใกล้ชิด เพื่อความมั่นใจว่าบทความนั้นถูกต้องและมีเนื้อหาครอบคลุมมากที่สุด บทความนี้ถูกเข้าชม 58,152 ครั้ง
หมวดหมู่: ซอฟท์แวร์
ในภาษาอื่น
English:Set Background Color in HTML
Bahasa Indonesia:Memasang Warna Latar Belakang HTML
Русский:задать цвет фона в HTML
Português:Configurar Cores de Fundo em HTML
Nederlands:De achtergrondkleur in HTML aanpassen
Tiếng Việt:Thiết lập màu nền trong HTML
日本語:HTMLで背景色を指定する
한국어:HTML 배경색 바꾸는 방법
มีการเข้าถึงหน้านี้ 58,152 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
⚠️ Disclaimer:
Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
โฆษณา
