RGBA Colors
Giá trị màu RGBA là phần mở rộng của các giá trị màu RGB với kênh alpha - chỉ định độ mờ cho một màu.
Giá trị màu RGBA được chỉ định bằng: rgba(red, green, blue, alpha). Tham số alpha là một số nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).
Ví dụ sau xác định các màu RGBA khác nhau:
#p1 {background-color: rgba(255, 0, 0, 0.3);} #p2 {background-color: rgba(0, 255, 0, 0.3);} #p3 {background-color: rgba(0, 0, 255, 0.3);} HSL Colors
HSL là viết tắt của Hue, Saturation và Lightness.
Giá trị màu HSL được chỉ định với: hsl (màu sắc, độ bão hòa, độ đậm nhạt).
Hue là một mức độ trên vòng màu (từ 0 đến 360):
- 0 (hoặc 360) là đỏ
- 120 là xanh lá
- 240 là xanh nước biển
Saturation là giá trị phần trăm: 100% là màu đầy đủ.
Lightness cũng là một tỷ lệ phần trăm; 0% là màu tối (đen) và 100% là màu trắng.
Ví dụ sau xác định các màu HSL khác nhau:
#p1 {background-color: hsl(120, 100%, 50%);} #p2 {background-color: hsl(120, 100%, 75%);} #p3 {background-color: hsl(120, 100%, 25%);} #p4 {background-color: hsl(120, 60%, 70%);} HSLA Colors
Giá trị màu HSLA là phần mở rộng của các giá trị màu HSL với kênh alpha - chỉ định độ mờ cho một màu.
Giá trị màu HSLA được chỉ định với: hsla(hue, saturation, lightness, alpha), trong đó tham số alpha xác định độ mờ. Tham số alpha là một số nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).
Ví dụ sau xác định các màu HSLA khác nhau:
#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);}
Opacity
Thuộc tính opacity của CSS đặt độ mờ cho toàn bộ element (cả màu nền và văn bản sẽ là màu đục / trong suốt).
Giá trị thuộc tính opacity phải là một số trong khoảng từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).
Lưu ý rằng văn bản ở trên cũng sẽ trong suốt / mờ đục!
Ví dụ sau cho thấy các element khác nhau có độ mờ:
#p1 {background-color:rgb(255,0,0);opacity:0.6;} #p2 {background-color:rgb(0,255,0);opacity:0.6;} #p3 {background-color:rgb(0,0,255);opacity:0.6;}