ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
บทความวิกิฮาวนี้จะแนะนำวิธีการเปลี่ยนสีพื้นหลังของหน้าเว็บ โดยแก้ไขโค้ด 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] X แหล่งข้อมูลอ้างอิง
- คุณใช้ 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] X แหล่งข้อมูลอ้างอิง
<! DOCTYPE html > < html > < head > < style > body { background-color : #93B874 ; } 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] X แหล่งข้อมูลอ้างอิง
background : linear-gradient ( direction / angle , color1 , color2 , color3 , etc .);
-
ทำสีเหลือบแนวตั้ง. ถ้าไม่กำหนดทิศทางให้สีเหลือบ ก็จะเป็นการเหลือบจากบนลงล่าง วิธีกำหนดสีเหลือบก็คือใช้โค้ดต่อไปนี้ โดยใส่ไว้กลางแท็ก
<style></style>html { min-height : 100 % ; } body { background : -webkit- linear-gradient ( #93B874 , #C9DCB9 ); background : -o- linear-gradient ( #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( #93B874 , #C9DCB9 ); background : linear-gradient ( #93B874 , #C9DCB9 ); background-color : #93B874 ; }
- แต่ละเบราว์เซอร์ก็มีวิธีกำหนดและใช้งานฟังก์ชั่นสีเหลือบนี้แตกต่างกันไป เพราะงั้นก็ต้องมีโค้ดหลายๆ เวอร์ชั่น
-
ทำสีเหลือบในทิศทางอื่น. ถ้าอยากได้สีเหลือบทิศทางอื่น ไม่เหลือบลงมาตรงๆ ทื่อๆ ก็ให้กำหนดทิศทางการเหลือบ เพื่อเปลี่ยนลักษณะการเหลือบของสี โดยพิมพ์โค้ดต่อไปนี้กลางแท็ก
<style></style>[4] X แหล่งข้อมูลอ้างอิงhtml { min-height : 100 % ; } body { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( right , #93B874 , #C9DCB9 ); background : linear-gradient ( to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; }
- ลองใช้แท็ก "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 , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( right , #93B874 , #C9DCB9 ); background : linear-gradient ( to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
โฆษณา
-
หา "html" header ของเอกสาร. ปกติจะอยู่ทางด้านบนของเอกสาร
-
ใส่คุณสมบัติ animation ให้ "body" element. พิมพ์โค้ดต่อไปนี้ในที่ว่างล่างวงเล็บเปิด "body {" แต่เหนือวงเล็บปิด [5] X แหล่งข้อมูลอ้างอิง
-webkit-animation : colorchange 60s infinite ; animation : colorchange 60s infinite ;
- ข้อความบรรทัดบนสุดนั้นสำหรับเบราว์เซอร์ตระกูล Chromium ส่วนข้อความบรรทัดล่างสุดสำหรับเบราว์เซอร์อื่นๆ
-
ใส่สีให้แอนิเมชั่น. คราวนี้เราจะมาใช้กฎ @keyframes กำหนดสีพื้นหลังให้เปลี่ยนแบบวนไป รวมถึงกำหนดว่าแต่ละสีจะอยู่นานแค่ไหน ย้ำว่าต้องใช้ entries แยกกันสำหรับแต่ละเบราว์เซอร์ ให้ใส่โค้ดต่อไปนี้ล่างวงเล็บปิดของ "body" [6] X แหล่งข้อมูลอ้างอิง
@ -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 60 s infinite ; animation : colorchange 60 s 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) ให้เว็บกลับมาออนไลน์อีกครั้ง
โฆษณา
ข้อมูลอ้างอิง
- ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
- ↑ http://www.w3schools.com/css/css_background.asp
- ↑ https://css-tricks.com/css3-gradients/
- ↑ http://www.w3schools.com/css/css3_gradients.asp
- ↑ https://codepen.io/metagrapher/pen/tgcLl
- ↑ http://www.w3schools.com/css/css3_animations.asp
โฆษณา
