Thứ Năm, 14 tháng 11, 2019

Thuộc tính Màu CSS

  Hoa Tran       Thứ Năm, 14 tháng 11, 2019
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 - chỉ định độ mờ cho màu.

Giá trị màu RGBA được chỉ định bằng: rgba (đỏ, lục, lam, alpha). Tham số alpha là một số trong khoảng 0,0 (hoàn toàn trong suốt) và 1,0 (hoàn toàn mờ).

Ví dụ sau định nghĩa các màu RGBA khác nhau:

Thí 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 */

Màu sắc 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 độ 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à một 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 (màu đen) và 100% là màu trắng.

Ví dụ sau định nghĩa các màu HSL khác nhau:

Thí 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 */

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 - 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ố trong khoảng 0,0 (hoàn toàn trong suốt) và 1,0 (hoàn toàn mờ).

Ví dụ sau định nghĩa các màu HSLA khác nhau:

Thí 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 */

Độ mờ đục
opacityThuộc tính CSS đặt độ mờ cho toàn bộ thành phần (cả màu nền và văn bản sẽ mờ / trong suốt).

Các opacitygiá trị tài sản phải là một số giữa 0.0 (hoàn toàn trong suốt) và 1.0 (hoàn toàn mờ đục).

rgb (255, 0, 0); độ mờ: 0,2;
rgb (255, 0, 0); độ mờ: 0,4;
rgb (255, 0, 0); độ mờ: 0,6;
rgb (255, 0, 0); độ mờ: 0,8;
logoblog

Thanks for reading Thuộc tính Màu CSS

Previous
« Prev Post

Không có nhận xét nào:

Đăng nhận xét