ค่าสี RGBA ย่อมาจาก Red, Green, Blue และ Alpha (ความทึบแสง) ค่าอัลฟาอยู่ระหว่าง 0.0 ถึง 1.0 โดย 1.0 = ทึบเต็มที่
ตัวอย่างความแตกต่างของความทึบแสง:
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> #demo1 {background-color:rgba(108,111,35,0.6);} #demo2 {background-color:rgba(108,111,35,0.5);} #demo3 {background-color:rgba(108,111,35,0.4);} #demo4 {background-color:rgba(108,111,35,0.3);} #demo5 {background-color:rgba(108,111,35,0.2);} #demo6 {background-color:rgba(108,111,35,0.1);} </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">Andy Bichel</p> </body> </html>
ผลลัพธ์
ไวยากรณ์ (Syntax)
rgba(red, green, blue, alpha)
- red, green, blue - ค่า 0-255 หรือเปอร์เซ็นต์ 0%-100%
- alpha - ค่า 0.0 (โปร่งใส) ถึง 1.0 (ทึบเต็มที่)
รูปแบบใหม่ (CSS Color Level 4)
/* ใช้ space แทน comma */ rgba(108 111 35 / 0.6) rgba(108 111 35 / 60%) /* รองรับเปอร์เซ็นต์สำหรับ RGB ด้วย */ rgba(42% 44% 14% / 0.6)
กรณีใช้งานยอดนิยม
- พื้นหลังโปร่งใสบนภาพ/วิดีโอ
- Overlay modal, tooltip, dropdown
- สร้างเงา (box-shadow) ที่โปร่งใส
- ข้อความบนพื้นหลังภาพ
