CSS Paint Worklet：背景画像のカスタマイズ
2025-05-26
この例では、CSS Paint Workletを使用して動的な背景画像を作成する方法を示しています。カスタムプロパティ`--boxColor`と`--widthSubtractor`を定義し、CSSの`nth-of-type`セレクターを使用することで、リストアイテムにさまざまな色と幅の背景画像を生成します。JavaScriptコードは、背景画像を描画するロジックを含む外部Paint Workletスクリプト`boxbg.js`を登録します。最終的な結果はカスタマイズ可能です。開発者ツールのカスタムプロパティ値を変更して、色と幅を変更できます。
開発
カスタム背景