--- title: paint() slug: Web/CSS/paint() tags: - CSS - CSS Function - CSS 関数 - CSS4-images - Houdini - Reference - Web - ウェブ translation_of: Web/CSS/paint() ---

paint() は CSS の関数で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。

構文

paint(workletName, parameters)

凡例

workletName: 登録された Worklet の名前です。
parameters: PaintWorklet へ渡される省略可能な追加の引数です。

例

CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。

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

li {
   --boxColor: hsla(55, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
   --boxColor: hsla(155, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, filled,  3px);
}

li:nth-of-type(3n+1) {
   --boxColor: hsla(255, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 1px);
}

boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。

仕様書

仕様書	状態	備考
{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}	{{Spec2('CSS Painting API')}}	初回定義

構文

例

仕様書

ブラウザーの互換性

関連情報