paint()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die paint() CSS Funktion definiert einen <image> Wert, der mit einem PaintWorklet erzeugt wird.

Syntax

css

paint(workletName, ...parameters)

wobei:

workletName: Der Name des registrierten Worklets.
parameters: Optionale zusätzliche Parameter, die dem paintWorklet übergeben werden

Beispiele

Grundlegendes Anwendungsbeispiel

In JavaScript registrieren wir das paint worklet:

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

... dann definieren wir im CSS das background-image als einen paint()-Typ mit dem Worklet-Namen, boxbg, zusammen mit allen Variablen (z.B. --boxColor und --widthSubtractor), die das Worklet verwenden wird:

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;
}

Das Ergebnis wird folgendes sein:

Mit zusätzlichen Parametern

Sie können zusätzliche Argumente über die CSS paint() Funktion übergeben. In diesem Beispiel haben wir zwei Argumente übergeben: Ob das background-image einer Gruppe von Listenelementen gefüllt ist oder nur einen Konturumriss hat, und die Breite dieses Umrisses:

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

Wir haben eine benutzerdefinierte Eigenschaft im Selektorblock eingefügt, die eine boxColor definiert. Benutzerdefinierte Eigenschaften sind für das PaintWorklet zugänglich.

Spezifikationen

Specification
CSS Painting API Level 1 # paint-notation

Browser-Kompatibilität

BCD tables only load in the browser