การตั้งค่าสีพื้นหลังใน CSS

เราสามารถระบุสีพื้นหลังขององค์ประกอบโดยใช้คุณสมบัติ background-color เราสามารถระบุค่าด้วยชื่อมาตรฐาน, rgb(), rgba(), hsl() หรือ hsla()

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS background-color ดังนี้:

Selector {    background-color: /*value*/ }

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS background-color:

<!DOCTYPE html> <html> <head> <style> p:first-of-type {    font-family: cursive;    background-color: pink; } p:last-child {    background-color: azure; } div {    margin: auto;    padding: 5px;    font-family: Helvetica;    width: 430px;    background-color: burlywood; } </style> </head> <body> <p> Java เป็นภาษาโปรแกรมมิ่งระดับสูงที่พัฒนาโดย Sun Microsystems เดิม<p> <div> Java เปิดตัวในปี 1995</div> <p> Java ทำงานบนแพลตฟอร์มต่างๆ เช่น Windows, Mac OS และรุ่นต่างๆ ของ UNIX</p> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <style> div {    background-color: springgreen; } h1 {    background-color: lightcoral;    text-align: center; } p {    background-color: lightseagreen;    font-size: 150%; } </style> </head> <body> <div> <h1>Demo</h1> <p>นี่คือข้อความสาธิต1 นี่คือข้อความสาธิต2 นี่คือข้อความสาธิต3. </p> </div> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: