Hàm hwb() của CSS
- Trang trước Hàm hue-rotate() CSS
- Trang tiếp theo Hàm hypot() CSS
- Quay lại層 trên Sách tham khảo hàm CSS
Định nghĩa và cách sử dụng
CSS của hwb()
Hàm sử dụng mô hình màu Tông-Độ sáng-Độ tối (HWB) để chỉ định màu. Cũng có thể thêm một kênh độ trong suốt tùy chọn (biểu thị độ trong suốt của màu).
Mẫu
Định nghĩa màu HWB(A) khác nhau:
#p1 {background-color:hwb(60 40% 20% / 0.5);} #p1 {background-color:hwb(120 40% 20%);} #p2 {background-color:hwb(120 40% 20%);} #p3 {background-color:hwb(120 40% 20% / 20%);} #p4 {background-color:hwb(240 40% 20%);} #p5 {background-color:hwb(240 50% 10%);} #p6 {background-color:hwb(240 40% 20% / 0.3);} #p7 {background-color:hwb(300 40% 20% / 0.5);} #p8 {background-color:hwb(360 40% 20%);}
Thử nghiệm trực tiếp
Ngôn ngữ CSS
Ngôn ngữ giá trị tuyệt đốihue whiteness blackness / A)
Giá trị | Mô tả |
---|---|
hue |
Bắt buộc. Định nghĩa gó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, 240 là màu xanh dương. Cũng có thể sử dụng none (tương đương với 0deg). |
whiteness |
Bắt buộc. Định nghĩa độ trắng của sự trộn; 0% biểu thị không có độ trắng, 100% biểu thị độ trắng hoàn toàn. Cũng có thể sử dụng none (tương đương với 0%). |
blackness |
Bắt buộc. Định nghĩa độ đen của sự trộn; 0% biểu thị không có độ đen, 100% biểu thị độ đen hoàn toàn. Cũng có thể sử dụng none (tương đương với 0%). |
/ A |
Tùy chọn. Giá trị độ trong suốt của màu (0% hoặc 0) biểu thị độ trong suốt hoàn toàn, 100% hoặc 100) biểu thị không trong suốt hoàn toàn. Cũng có thể sử dụng none (mã hóa độ trong suốt không). Giá trị mặc định là 100%. |
Ngôn ngữ giá trị tương đối
hwb(from color whiteness blackness / A)
Giá trị | Mô tả |
---|---|
from color |
Bắt đầu bằng từ khóa from, sau đó là giá trị màu biểu thị màu gốc. Đây là màu gốc dựa trên màu tương đối. |
hue |
Bắt buộc. Định nghĩa gó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, 240 là màu xanh dương. Cũng có thể sử dụng none (tương đương với 0deg). |
whiteness |
Bắt buộc. Định nghĩa độ trắng của sự trộn; 0% biểu thị không có độ trắng, 100% biểu thị độ trắng hoàn toàn. Cũng có thể sử dụng none (tương đương với 0%). |
blackness |
Bắt buộc. Định nghĩa độ đen của sự trộn; 0% biểu thị không có độ đen, 100% biểu thị độ đen hoàn toàn. Cũng có thể sử dụng none (tương đương với 0%). |
/ A |
Tùy chọn. Giá trị độ trong suốt của màu (0% hoặc 0) biểu thị độ trong suốt hoàn toàn, 100% hoặc 100) biểu thị không trong suốt hoàn toàn. Cũng có thể sử dụng none (mã hóa độ trong suốt không). Giá trị mặc định là 100%. |
Chi tiết kỹ thuật
Phiên bản: | CSS Color Module Level 4 |
---|
Hỗ trợ trình duyệt
Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
hwb() | ||||
101 | 101 | 96 | 15 | 87 |
Kết hợp số và phần trăm trong tham số | ||||
121 | 121 | 122 | Không hỗ trợ | 107 |
Trang liên quan
Tham khảo:Màu CSS
Tham khảo:Hàm hsl() trong CSS
Tham khảo:Hàm lab() trong CSS
Tham khảo:Hàm lch() trong CSS
Tham khảo:Hàm oklab() CSS
Tham khảo:Hàm oklch() CSS
- Trang trước Hàm hue-rotate() CSS
- Trang tiếp theo Hàm hypot() CSS
- Quay lại層 trên Sách tham khảo hàm CSS