ฟังก์ชัน hsla() ของ CSS

ตัวอย่าง

คำนิยามสี HSL ที่มีความโปร่งใสต่าง ๆ:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* สีเขียว */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* สีเขียวขาว */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* สีเขียวดำ */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* สีเขียวอ่อน */

ลองทดลองด้วยตัวเอง

คำนิยามและวิธีใช้

ฟังก์ชัน hsla() ใช้โมเดล Hue-saturation-lightness-alpha (HSLA) ที่ใช้เพื่อกำหนดสี.

ค่าสี HSLA คือการขยายค่าสี HSL ด้วยช่อง Alpha - ช่องนี้กำหนดความโปร่งใสของสี.

เวอร์ชั่น: CSS3

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางบอกว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนความงามนี้.

ฟังก์ชัน
hsla() 1.0 9.0 3.0 3.1 10.0

CSS ภาษา

hsla(สีฝั่ง, ความชื้น, ความขาว, alpha)
ค่า การอธิบาย
สีฝั่ง คำนิยามมาตราทางรอบสี (จาก 0 ถึง 360) - 0 (หรือ 360) คือสีแดง 120 คือสีเขียว 240 คือสีสีน้ำเงิน.
ความชื้น คำนิยามความชื้น - 0% คือสีขาวเข้ม และ 100% คือสีเต็มทั้งหมด (ความชื้นเต็มทั้งหมด).
ความขาว กำหนดความระเบิด - 0% คือดำ 50% คือปกติ 100% คือขาว
alpha กำหนดความมั่นคง ตั้งแต่ 0.0 (แสดงความโปร่งใสสุด) ถึง 1.0 (แสดงความมั่นคงสุด)