ฟังก์ชัน rgba() ใช้สำหรับกำหนดสีในโมเดล RGB พร้อมกับค่า Alpha (ความทึบแสง/ความโปร่งใส) ซึ่งแตกต่างจาก rgb() ที่ไม่มีค่า Alpha
- rgb(r, g, b): ค่าสีแดง เขียว น้ำเงิน (0-255)
- rgba(r, g, b, a): เพิ่มค่า Alpha (0.0 ถึง 1.0) โดย 0.0 = โปร่งใสเต็มที่, 1.0 = ทึบเต็มที่
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: hsl(0, 100%, 50%); /* สีแดง */
}
h2 {
background-color: rgb(0, 0, 255); /* สีฟ้า */
color: rgb(255, 255, 255); /* ตัวอักษรสีขาว */
}
p {
background-color: rgba(255, 0, 0, 0.9); /* สีแดง โปร่งใส 10% */
}
</style>
</head>
<body>
<h1>พื้นหลังสีแดง</h1>
<h2>พื้นหลังสีฟ้า</h2>
<p>This is demo text!</p>
</body>
</html>
การประยุกต์ใช้: rgba() เหมาะสำหรับการสร้างพื้นหลังโปร่งใส, overlay, modal dialog หรือเอฟเฟกต์ glassmorphism โดยไม่ต้องใช้รูปภาพ PNG
