Màu CSS
CSS hỗ trợ hơn 140 tên màu, giá trị HEX, giá trị RGB , giá trị RGBA, giá trị HSL, giá trị HSLA và độ mờ.
Màu RGBA
Giá trị màu RGBA là phần mở rộng của giá trị màu RGB với kênh alpha - kênh này chỉ định độ mờ cho 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 mờ).
Ví dụ sau xác định các màu RGBA khác nhau:
Ví dụ
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
Hãy tự mình thử » Màu HSL
HSL là viết tắt của Hue, Saturation và Lightness.
Giá trị màu HSL được chỉ định bằng: hsl(màu sắc, độ bão hòa, độ sáng).
- Hue là một mức độ trên bánh xe màu (từ 0 đến 360):
- 0 (hoặc 360) là màu đỏ
- 120 là màu xanh lá cây
- 240 là màu xanh
- Độ bão hòa là giá trị phần trăm: 100% là màu đầy đủ.
- Độ nhẹ 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 đây xác định các màu HSL khác nhau:
Ví dụ
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Hãy tự mình thử »Màu sắc HSLA
Giá trị màu HSLA là phần mở rộng của giá trị màu HSL với kênh alpha - kênh này chỉ định độ mờ cho màu.
Giá trị màu HSLA được chỉ định bằng: hsla(màu sắc, độ bão hòa, độ sáng, 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 mờ).
Ví dụ sau đây xác định các màu HSLA khác nhau:
Ví dụ
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
Hãy tự mình thử »Độ mờ
Thuộc tính CSS opacity
đặt độ mờ cho toàn bộ phần tử (cả màu nền và văn bản sẽ mờ/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 mờ).
Lưu ý rằng văn bản ở trên cũng sẽ trong suốt/đục!
Ví dụ sau đây cho thấy các phần tử khác nhau có độ mờ:
Ví dụ
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */
Hãy tự mình thử »