ฟังก์ชัน CSS rgba() สำหรับสีพร้อมความทึบแสง

ฟังก์ชัน rgba() กำหนดค่าสี RGBA: Red, Green, Blue และ Alpha (ความทึบแสง) Alpha = 0.0 (โปร่งใส) ถึง 1.0 (ทึบแสงเต็มที่)

ตัวอย่างที่ 1: แสดงความทึบแสงต่างๆ

<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} #demo3 {background-color: hsla(190, 100%, 50%, 0.4);} #demo4 {background-color: hsla(170, 100%, 50%, 0.3);} #demo5 {background-color: hsl(150, 100%, 60%);} #demo6 {    background-color:rgba(108,111,35,0.6);    font-size:30px;    color:yellow;    transform: rotate(45deg); } </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Australian Cricketers</p> </body> </html>

ตัวอย่างที่ 2: ใช้กับ text-decoration

<!DOCTYPE html> <html> <head> <style> span {    background-color: rgba(100, 150, 50, 0.6);    text-decoration: line-through;    text-decoration-color: blue; } .demo2 {    text-decoration: underline;    text-decoration-color: yellow; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p> <p class="demo2">Exam begins at 11AM.</p> </body> </html>

คำอธิบาย

ตัวอย่างที่ 1 เปรียบเทียบ HSLA (Hue-based) กับ RGBA (RGB-based) ทั้งคู่รองรับ Alpha channel ตัวอย่างที่ 2 ใช้ rgba() กำหนดพื้นหลังสีเขียวอ่อนโปร่งใส 0.6 พร้อม text-decoration สีต่างกัน

รูปแบบค่า RGBA:

• rgba(red, green, blue, alpha) - ค่า 0-255 สำหรับ RGB, 0.0-1.0 สำหรับ alpha
• rgba(100%, 50%, 0%, 0.8) - รองรับเปอร์เซ็นต์สำหรับ RGB (CSS Color Level 4)
• rgba(255 0 0 / 0.5) - รูปแบบใหม่ space-separated (CSS Color Level 4)

RGBA vs HSLA: