ทำสีพื้นหลัง โดย css

ถ้าใครค้นหาเรื่อง 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 อื่นทับเป็นอันดับแรก