หากต้องการเพิ่มสีพื้นหลังให้กับองค์ประกอบ HTML คุณสามารถใช้คุณสมบัติ CSS background-color .
สมมติว่าคุณมีมาร์กอัป HTML ต่อไปนี้ และคุณต้องการเพิ่มสีพื้นหลังให้กับ <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>
วิธีที่ง่ายที่สุดในการเพิ่มสีพื้นหลังคือการสร้าง <style> . ภายใน องค์ประกอบในเอกสาร HTML ของคุณ
ใน <head> องค์ประกอบใน HTML สร้างชุดของ <style></style> แท็ก จากนั้นคุณสามารถเพิ่มกฎสไตล์ CSS สำหรับสีพื้นหลังใน <style> ธาตุ
<head>
<meta charset="UTF-8">
<title>Changing background color in HTML/CSS</title>
<style>
body {
background-color: #78a8eb;
}
</style>
</head>โค้ด HTML และ CSS นี้จะส่งผลให้หน้าเว็บมีลักษณะดังนี้!
สัญกรณ์สี
#78a8eb ค่าสำหรับ background-color คุณสมบัติเขียนด้วยเลขฐานสิบหกหรือที่เรียกว่าเลขฐานสิบหก แสดงถึงสีด้วยชุดอักขระสำหรับช่องสีแดง สีเขียว และสีน้ำเงิน อักขระมีตั้งแต่ตัวเลข 0 ถึง 9 ตามด้วยตัวอักษร A-F ศูนย์ (0) คือค่าต่ำสุด และ F คือค่าสูงสุด
คุณยังแสดงสีใน CSS ได้โดยใช้สัญลักษณ์อื่นๆ
ตัวอย่างเช่น ในฟังก์ชันการทำงาน สีจะถูกจัดรูปแบบเป็น rgba() . ในตัวอย่างของเรา สีพื้นหลังจะเขียนดังนี้:
background-color: rgb(120, 168, 235);หรือในรูปแบบ HSL (Hue, Saturation, Lightness) จะเขียนดังนี้:
background-color: hsl(215, 74%, 70%);วิธีการเขียนสีแบบใดก็ได้ในสามวิธีนี้เป็นที่ยอมรับในเบราว์เซอร์รุ่นใหม่
วิธีที่เลิกใช้แล้ว (อย่าใช้)
ในมาตรฐานเว็บเวอร์ชันก่อนหน้า ผู้คนจะใช้ bgcolor คุณสมบัติที่มีสีฐานสิบหกในแท็ก HTML เอง:
<body bgcolor="#78a8eb" ></body>อย่างไรก็ตาม นี่เป็นวิธีเก่าในการตั้งค่าสีพื้นหลัง คุณไม่ควรใช้สิ่งนี้อีกต่อไป เพียงแค่เขียนสไตล์ CSS เพื่อควบคุมสี
