Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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)

wo:

workletName

Der Name des registrierten Worklets.

parameters Optional

Optionale zusätzliche Parameter, die an das paintWorklet übergeben werden

Formale Syntax

<paint()> = 
paint( <ident> , <declaration-value>? )

Beispiele

Grundlegende Verwendung von CSS paint()

Im folgenden HTML:

html
<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>

Registrieren wir das paint worklet in JavaScript:

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

Im CSS definieren wir das background-image als einen paint()-Typ mit dem Worklet-Namen boxbg sowie allen Variablen (z.B. --box-color und --width-subtractor), die das Worklet verwenden wird:

css
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() mit Parametern

Sie können optionale Argumente in der CSS-paint()-Funktion übergeben. In diesem Beispiel haben wir zwei Argumente übergeben, die steuern, ob das background-image auf einer Gruppe von Listenelementen filled ist oder eine stroke-Kontur hat, und die width dieser Kontur:

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

Wir haben eine benutzerdefinierte Eigenschaft im Selektorblock aufgenommen, 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

Siehe auch