paint()

可用性有限

此功能不是基线，因为它在一些使用最广泛的浏览器中不起作用。

**paint()** CSS 函数定义了使用 PaintWorklet 生成的 <image> 值。

语法

css

paint(workletName, ...parameters)

其中

workletName: 已注册的 worklet 的名称。
parameters: 可选的附加参数，传递给 paintWorklet

示例

基本用法示例

在 JavaScript 中，我们注册绘制 worklet

CSS.paintWorklet.addModule("boxbg.js");

...然后，在 CSS 中，我们将 background-image 定义为使用 worklet 名称 boxbg 的 paint() 类型，以及 worklet 将使用的任何变量（例如 --boxColor 和 --widthSubtractor）

css

li {
  background-image: paint(boxbg);
  --boxColor: hsl(55 90% 60% / 100%);
}
li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60% / 100%);
  --widthSubtractor: 20;
}
li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60% / 100%);
  --widthSubtractor: 40;
}

结果将如下所示

使用附加参数

您可以通过 CSS paint() 函数传递其他参数。在本例中，我们传递了两个参数：一组列表项上的 background-image 是填充还是只是有一个描边轮廓，以及该轮廓的宽度

<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 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>
</ul>

CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);

css

li {
  --boxColor: hsl(55 90% 60% / 100%);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60% / 100%);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60% / 100%);
  background-image: paint(hollowHighlights, stroke, 1px);
}

我们在选择器块中包含了一个自定义属性，定义了 boxColor。自定义属性对 PaintWorklet 可访问。

规范

规范
CSS 绘制 API 第 1 级 # paint-notation

浏览器兼容性

BCD 表仅在浏览器中加载

语法

示例

基本用法示例

使用附加参数

规范

浏览器兼容性

另请参阅