Chức năng oklab() của CSS
- Trang trước Hàm mod() CSS
- Trang tiếp theo Hàm oklch() CSS
- Quay lại lớp trên Sách tham khảo hàm CSS
Định nghĩa và cách sử dụng
CSS của oklab()
Chức năng của hàm được sử dụng để chỉ định màu sắc trong không gian màu OKLAB. Không gian màu này nhằm mô phỏng cách mà mắt con người cảm nhận màu sắc.
thực thể
Định nghĩa khác nhau oklab()
Màu sắc:
#p1 {background-color:oklab(0 40% 20% / 0.5);} #p2 {background-color:oklab(0.3 -40% -20%);} #p3 {background-color:oklab(0.4 30% -20% / 20%);} #p4 {background-color:oklab(0.5 60% 20%);} #p5 {background-color:oklab(0.6 50% -10%);} #p6 {background-color:oklab(0.7 70% -80% / 0.3);} #p7 {background-color:oklab(0.8 70% 20% / 0.5);} #p8 {background-color:oklab(0.9 80% -20%);} #p9 {background-color:oklab(1 90% -100%);}
Ngôn ngữ CSS
Ngôn ngữ giá trị tuyệt đối
oklab(L a b / A)
Giá trị | Mô tả |
---|---|
L |
Bắt buộc. Định nghĩa độ sáng cảm nhận của màu sắc, có thể là số từ 0 đến 1 hoặc phần trăm từ 0% đến 100%. 0 (hoặc 0%) biểu thị màu đen, 1 (hoặc 100%) biểu thị màu trắng. Cũng có thể sử dụng None (tương đương với 0%). |
a |
Bắt buộc. Định nghĩa số hoặc phần trăm từ -0.4 đến 0.4 hoặc từ -100% đến 100%. Định nghĩa khoảng cách màu theo trục a, biểu thị mức độ đỏ-xanh lá cây của màu sắc. -0.4 biểu thị màu xanh lá cây, 0.4 biểu thị màu đỏ. Cũng có thể sử dụng none (tương đương với 0%). |
b |
Bắt buộc. Định nghĩa số hoặc phần trăm từ -0.4 đến 0.4 hoặc từ -100% đến 100%. Định nghĩa khoảng cách màu theo trục b, biểu thị mức độ vàng-xanh của màu sắc. -0.4 biểu thị màu xanh, 0.4 biểu thị màu vàng. Cũng có thể sử dụng none (tương đương với 0%). |
/ A |
Tùy chọn. Biểu thị giá trị kênh độ trong suốt của màu sắc (0% hoặc 0) biểu thị hoàn toàn trong suốt, 100% hoặc 100) biểu thị hoàn toàn không trong suốt. Cũng có thể sử dụng none (để biểu thị kênh độ trong suốt). Giá trị mặc định là 100%. |
Ngôn ngữ giá trị tương đối
oklab(from color L a b / A)
Giá trị | Mô tả |
---|---|
from color |
Bắt đầu bằng từ khóa from, sau đó là giá trị màu sắc biểu thị màu sắc ban đầu. Đây là màu sắc ban đầu mà màu sắc tương đối dựa trên. |
L |
Bắt buộc. Định nghĩa độ sáng cảm nhận của màu sắc, có thể là số từ 0 đến 1 hoặc phần trăm từ 0% đến 100%. 0 (hoặc 0%) biểu thị màu đen, 1 (hoặc 100%) biểu thị màu trắng. Cũng có thể sử dụng none (tương đương với 0%). |
a |
Bắt buộc. Định nghĩa số hoặc phần trăm từ -0.4 đến 0.4 hoặc từ -100% đến 100%. Định nghĩa khoảng cách màu theo trục a, biểu thị mức độ đỏ-xanh lá cây của màu sắc. -0.4 biểu thị màu xanh lá cây, 0.4 biểu thị màu đỏ. Cũng có thể sử dụng none (tương đương với 0%). |
b |
Bắt buộc. Định nghĩa số hoặc phần trăm từ -0.4 đến 0.4 hoặc từ -100% đến 100%. Định nghĩa khoảng cách màu theo trục b, biểu thị mức độ vàng-xanh của màu sắc. -0.4 biểu thị màu xanh, 0.4 biểu thị màu vàng. Cũng có thể sử dụng none (tương đương với 0%). |
/ A |
Tùy chọn. Biểu thị giá trị kênh độ trong suốt của màu sắc (0% hoặc 0) biểu thị hoàn toàn trong suốt, 100% hoặc 100) biểu thị hoàn toàn không trong suốt. Cũng có thể sử dụng none (để biểu thị kênh độ trong suốt). 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 |
---|---|---|---|---|
oklab() | ||||
111 | 111 | 113 | 15.4 | 97 |
Kết hợp số và phần trăm trong tham số | ||||
116 | 116 | 113 | 16.2 | 102 |
Trang liên quan
Tham khảo:Màu CSS
Tham khảo:Hàm hsl() trong CSS
Tham khảo:Hàm hwb() CSS
Tham khảo:Hàm lch() CSS
Tham khảo:Hàm lab() CSS
Tham khảo:Hàm oklch() CSS
- Trang trước Hàm mod() CSS
- Trang tiếp theo Hàm oklch() CSS
- Quay lại lớp trên Sách tham khảo hàm CSS