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 Verwendung von CSS paint()
Angenommen, folgendes 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>
Im 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 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 filled ist oder nur eine stroke Umrisslinie hat, und die width dieser Linie:
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 Selektor-Block 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
Loading…