在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

paint() CSS function defines an <image> value generated with a PaintWorklet.

句法

paint(workletName, parameters)
					

where:

workletName

The name of the registered worklet.

parameters

Optional additional parameters to pass to the paintWorklet

范例

Basic usage example

You can pass additional arguments via the CSS paint() function. In this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline:

<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');
					

li {
   --boxColor: hsla(55, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 2px);
}
li:nth-of-type(3n) {
   --boxColor: hsla(155, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, filled,  3px);
}
li:nth-of-type(3n+1) {
   --boxColor: hsla(255, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 1px);
}
					

We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.

规范

规范	状态	注释
CSS Painting API Level 1 The definition of 'Paint Notation' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
paint()	Chrome 完整支持 65	Edge 完整支持 79	Firefox 不支持 No	IE 不支持 No	Opera 完整支持 52	Safari 不支持 No	WebView Android 完整支持 65	Chrome Android 完整支持 65	Firefox Android 不支持 No	Opera Android 完整支持 47	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.2

图例

完整支持

完整支持

不支持

不支持

另请参阅

• PaintWorklet
• CSS Painting API
• Using the CSS Painting API
• <image>
• canvas

元数据

• 最后修改： Oct 29, 2020

相关话题

1. CSS
2. CSS 参考