ทำสีพื้นหลัง โดย css
Background-color คือ คุณสมบัติใน CSS ที่ใช้กำหนดสีพื้นหลังขององค์ประกอบ HTML. มันเป็นส่วนหนึ่งของสไตล์ที่ใช้ในการออกแบบเว็บ เพื่อกำหนดลักษณะที่ปรากฏของหน้าเว็บ. คุณสามารถใช้ background-color เพื่อเปลี่ยนสีพื้นหลังของส่วนต่างๆ ของหน้าเว็บ เช่น div, ย่อหน้า, หรือทั้งหน้าเว็บ.
วิธีการใช้งาน:
CSS แบบ Inline: คุณสามารถกำหนด background-color โดยตรงในแท็ก HTML โดยใช้แอตทริบิวต์ style.
โค้ด
<div style="background-color: lightblue;">
... เนื้อหา ...
</div>
CSS ภายใน (Internal): คุณสามารถกำหนดสไตล์ในส่วน <style> ของเอกสาร HTML.
โค้ด
<style>
div {
background-color: lightblue;
}
</style>
CSS ภายนอก (External): คุณสามารถสร้างไฟล์ CSS แยกต่างหาก และเชื่อมโยงไปยังเอกสาร HTML.
โค้ด
<link rel="stylesheet" type="text/css" href="styles.css">
ในไฟล์ styles.css
โค้ด
div {
background-color: lightblue;
}
ค่าสี: background-color สามารถรับค่าได้หลายแบบ เช่น ชื่อสี (เช่น "red", "blue"), รหัสสีเลขฐานสิบหก (เช่น "#FF0000 "), ค่า RGB (เช่น "rgb(255, 0, 0)"), หรือค่า HSL (เช่น "hsl(0, 100%, 50%)").
ตัวอย่าง:
โค้ด
<div style="background-color: #00FFFF ;">
This div has a cyan background.
</div>
<div style="background-color: rgb(255, 0, 0);">
This div has a red background.
</div>
ถ้าใครค้นหาเรื่อง background color css แล้วลองทำตามแต่ยังงง ๆ ว่าควรใช้แบบไหน หรือทำไมสีไม่ขึ้น นี่คือสิ่งที่ฉันเจอบ่อยและวิธีแก้แบบง่าย ๆ (เอาไปใช้กับหน้าเว็บไซต์ได้เลย) 1) จะใส่สีพื้นหลังให้ “ทั้งหน้าเว็บ” ต้องใส่ที่ไหน? หลายคนใส่ให้ div แล้วคิดว่าทั้งหน้าจะเปลี่ยน จริง ๆ ถ้าจะให้พื้นหลังทั้งหน้าเปลี่ยน แนะนำกำหนดที่ body ตัวอย่าง: body { background-color: #00FFFF; } 2) ทำไม background-color ไม่แสดงผล? เช็กลิสต์เร็ว ๆ: - องค์ประกอบนั้นไม่มีความสูง/ไม่มีเนื้อหา (เช่น div ว่าง ๆ) สีเลยเหมือนไม่ขึ้น ให้ลองใส่ padding หรือกำหนด height - มี CSS ตัวอื่นทับ (specificity สูงกว่า) เช่น มี class หรือ id มาเขียนทับภายหลัง - ลืม link ไฟล์ external CSS หรือพิมพ์ชื่อไฟล์/พาธผิด ตัวอย่างให้ div เห็นพื้นหลังชัดขึ้น: .box { background-color: lightblue; padding: 16px; } 3) เลือกใช้ Inline / Internal / External แบบไหนดี? จากประสบการณ์ส่วนตัว: - Inline (style="...") เหมาะกับลองเร็ว ๆ หรือแก้เฉพาะจุด แต่ดูแลยากถ้าเยอะ - Internal (<style> ในหน้าเดียว) เหมาะกับหน้าเดียวจบ เช่น demo หรือหน้า landing ง่าย ๆ - External (ไฟล์ .css) เหมาะสุดสำหรับทำเว็บจริง เพราะจัดการง่ายและใช้ซ้ำได้หลายหน้า 4) รูปแบบค่าสีที่ใช้บ่อย (พร้อมทริค) - ชื่อสี: red, blue, lightblue (ง่ายแต่เลือกเฉดได้น้อย) - Hex: #FF0000, #00FFFF (นิยมมาก) - RGB: rgb(255, 0, 0) - HSL: hsl(0, 100%, 50%) (ปรับโทน/ความสว่างง่าย) ถ้าอยากให้สีพื้นหลัง “โปร่งใส” ให้ใช้ rgba() เช่น: background-color: rgba(0, 255, 255, 0.3); 5) ทำพื้นหลังไล่สี (gradient) ต้องใช้ background ไม่ใช่ background-color อันนี้เป็นจุดที่หลายคนสับสน: ถ้าอยากไล่สี ให้ใช้ background: linear-gradient(...) ตัวอย่าง: .hero { background: linear-gradient(90deg, #00FFFF, lightblue); } 6) ทำพื้นหลังเป็นรูปภาพร่วมกับสีพื้นหลัง ถ้าใส่รูปแล้วรูปโหลดไม่ขึ้น อย่างน้อยยังมีสีพื้นหลังรองไว้ได้: .banner { background-color: lightblue; background-image: url("bg.jpg"); background-size: cover; background-position: center; } สรุปสั้น ๆ: ถ้าต้องการแค่ “ทำสีพื้นหลัง” ให้ใช้ background-color ได้เลย เลือกเขียนแบบ External จะดูแลง่ายสุด และถ้าสีไม่ขึ้นให้เช็กเรื่องความสูงของกล่อง/การถูก CSS อื่นทับเป็นอันดับแรก
