paint()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Hàm paint() trong CSS định nghĩa một giá trị <image> được tạo ra bởi một PaintWorklet.
Cú pháp
paint(workletName, ...parameters)
trong đó:
- workletName
-
Tên của worklet đã được đăng ký.
- parameters Optional
-
Các tham số bổ sung tùy chọn để truyền cho paintWorklet
Cú pháp chính thức
<paint()> =
paint( <ident> , <declaration-value>? )
Ví dụ
Sử dụng CSS paint() cơ bản
Cho HTML sau:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item N</li>
</ul>
Trong JavaScript, chúng ta đăng ký paint worklet:
CSS.paintWorklet.addModule(
"https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js",
);
Trong CSS, chúng ta định nghĩa background-image là kiểu paint() với tên worklet là boxbg, cùng với các biến (ví dụ --box-color và --width-subtractor) mà worklet sẽ sử dụng:
body {
font: 1.2em / 1.2 sans-serif;
}
li {
background-image: paint(boxbg);
--box-color: hsl(55 90% 60%);
}
li:nth-of-type(3n) {
--box-color: hsl(155 90% 60%);
--width-subtractor: 20;
}
li:nth-of-type(3n + 1) {
--box-color: hsl(255 90% 60%);
--width-subtractor: 40;
}
CSS paint() với tham số
Bạn có thể truyền các đối số tùy chọn trong hàm CSS paint(). Trong ví dụ này, chúng ta đã truyền hai đối số để kiểm soát xem background-image trên một nhóm các mục danh sách là filled (đổ đầy) hay có đường viền stroke, và width (độ rộng) của đường viền đó:
body {
font: 1.2em / 1.2 sans-serif;
}
li {
--box-color: hsl(55 90% 60% / 100%);
background-image: paint(hollow-highlights, stroke, 2px);
}
li:nth-of-type(3n) {
--box-color: hsl(155 90% 60% / 100%);
background-image: paint(hollow-highlights, filled, 3px);
}
li:nth-of-type(3n + 1) {
--box-color: hsl(255 90% 60% / 100%);
background-image: paint(hollow-highlights, stroke, 1px);
}
Chúng ta đã bao gồm một thuộc tính tùy chỉnh trong khối bộ chọn để định nghĩa màu hộp. Các thuộc tính tùy chỉnh có thể truy cập được từ PaintWorklet.
Thông số kỹ thuật
| Specification |
|---|
| CSS Painting API Level 1 # paint-notation |