วิธีเปลี่ยนสีพื้นหลังใน HTML/CSS

เพื่อเพิ่มสีพื้นหลังให้ HTML element คุณสามารถใช้คุณสมบัติ CSS background-color

สมมติคุณมี HTML Markup ดังนี้ และต้องการเพิ่มสีพื้นหลังให้ element <body>:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Changing background color in HTML/CSS</title> </head> <body> <h1>Here's an awesome website!</h1> </body> </html>

วิธีง่ายที่สุดคือสร้าง internal <style> element ในเอกสาร HTML

ใน element <head> ใน HTML สร้างชุดแท็ก <style></style> แล้วเพิ่มกฎ CSS สำหรับสีพื้นหลังใน element <style>

<head> <meta charset="UTF-8"> <title>Changing background color in HTML/CSS</title> <style> body { background-color: #78a8eb; } </style> </head>

HTML และ CSS นี้จะได้หน้าเว็บลักษณะนี้!

รูปแบบสี (Color Notation)

ค่า #78a8eb สำหรับ background-color เขียนใน Hexadecimal Notation หรือเรียกสั้นๆ ว่า Hex แทนสีด้วยชุดตัวอักษรแต่ละช่องสำหรับช่องสี Red, Green, Blue ตัวอักษรตั้งแต่ตัวเลข 0-9 แล้ว A-F ศูนย์ (0) คือค่าต่ำสุด F คือค่าสูงสุด

คุณสามารถแทนสีใน CSS ด้วยรูปแบบอื่นได้อีก

เช่น ใน Functional Notation สีจัดรูปแบบเป็น rgba() ในตัวอย่างสีพื้นหลังจะเขียนว่า:

background-color: rgb(120, 168, 235);

หรือใน HSL (Hue, Saturation, Lightness) Notation จะเขียนว่า:

background-color: hsl(215, 74%, 70%);

ทั้ง 3 วิธีเขียนสียอมรับได้ในเบราว์เซอร์สมัยใหม่

วิธีที่เลิกใช้แล้ว (อย่าใช้)

ในเวอร์เก็นมาตรฐานเว็บก่อนหน้า คนใช้ property bgcolor พร้อมสี hex ในแท็ก HTML เอง:

<body bgcolor="#78a8eb" ></body>

อย่างไรก็ตาม นี่เป็นวิธีเก่าสำหรับตั้งสีพื้นหลัง ไม่ควรใช้แล้ว—แค่เขียน CSS Styles ควบคุมสีแทน