ฟังก์ชัน hsla() เป็นส่วนขยายของ hsl() โดยเพิ่มค่า Alpha (ความทึบแสง/ความโปร่งใส) เข้าไปเป็นพารามิเตอร์ที่ 4
รูปแบบไวยากรณ์
hsla(hue, saturation%, lightness%, alpha)
- hue: 0-360 (องศา)
- saturation: 0%-100%
- lightness: 0%-100%
- alpha: 0.0 (โปร่งใส) - 1.0 (ทึบ)
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: hsl(0, 100%, 50%); /* แดง ทึบ */
}
h2 {
background-color: hsl(192, 89%, 48%); /* ฟ้า ทึบ */
}
p {
background-color: hsla(290, 100%, 50%, 0.3); /* ม่วง โปร่งใส 70% */
}
</style>
</head>
<body>
<h1>Red Background</h1>
<h2>Blue Background</h2>
<p>This is demo text!</p>
</body>
</html>
ข้อดีของ HSLA: ควบคุมความโปร่งใสได้โดยตรงในฟังก์ชันสีเดียว ไม่ต้องใช้ opacity บน element ทั้งหมด (ซึ่งจะทำให้ลูก element โปร่งใสด้วย)
รองรับ: บราวเซอร์สมัยใหม่ทุกตัว รวมถึง IE9+
