Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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
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 CSS paint() Nutzung
Angenommen, folgendes HTML ist gegeben:
<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>
In JavaScript registrieren wir das paint worklet:
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, zusammen mit allen Variablen (z.B. --box-color und --width-subtractor), die das Worklet verwenden wird:
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 einer Gruppe von Listenelementen gefüllt ist oder einen stroke-Umriss 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 N</li>
</ul>
CSS.paintWorklet.addModule(
"https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
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
Enable JavaScript to view this browser compatibility table.