Màu sắc trong CSS (nâng cao) - CSS Colors (advanced)

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    14 thg 11, 2022

  • Số lượt xem

    500 lượt xem


Tìm hiểu nâng cao về màu sắc trong CSS.

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).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

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.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);

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).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

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).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

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;}

Tổng số đánh giá: 1

Xếp hạng: 5.0 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.