paint() CSS-Funktion
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
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()
Gegeben 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>
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 sowie mit 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 eine stroke-Kontur hat und die width dieser Kontur:
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 enthalten, die eine boxColor definiert. Benutzerdefinierte Eigenschaften sind für das PaintWorklet zugänglich.
Spezifikationen
| Spezifikation |
|---|
| CSS Painting API Level 1 # paint-notation |