hàm hsla() CSS

ví dụ

định nghĩa màu HSL khác nhau với độ trong suốt:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* màu xanh lá cây */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* màu xanh lá cây nhạt */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* màu xanh lục đậm */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* màu xanh lá cây nhạt */

thử ngay

định nghĩa và cách sử dụng

hàm hsla() sử dụng mô hình màu Hue-saturation-lightness-alpha (HSLA) để định nghĩa màu.

Giá trị màu HSLA là mở rộng của giá trị màu HSL, có kênh Alpha - kênh này xác định độ trong suốt của màu.

phiên bản: CSS3

hỗ trợ trình duyệt

số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng này.

hàm
hsla() 1.0 9.0 3.0 3.1 10.0

cú pháp CSS

hsla(màu sắc, bão hòa, sáng độ, alpha)
giá trị miêu tả
màu sắc Định nghĩa độ số trên bánh màu (từ 0 đến 360) - 0 (hoặc 360) là màu đỏ, 120 là màu xanh lục, 240 là màu xanh dương.
bão hòa Định nghĩa độ bão hòa - 0% là xám, còn 100% là màu hoàn toàn (hoàn toàn bão hòa).
sáng độ Định nghĩa độ sáng - 0% là đen, 50% là bình thường, 100% là trắng.
alpha Định nghĩa độ mờ, là số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).