Wie kann ich Bilder an eine CSS -Farb -Working übergeben? ⇐ CSS

[Anonymous]

Ich versuche mit der CSS-Farb-API einen benutzerdefinierten Hintergrund für einen H1-Tag zu erstellen. Der Hintergrund sollte in den Text abgeschnitten werden, daher möchte ich es im Wesentlichen "färben". Es ist eine Anforderung, tatsächlich ein H1 -Tag zu verwenden und nicht nur Text in einer Leinwand zu rendern und Kompositionsmodi zu verwenden. /li>
< /ul>
Die Spezifikation ist ziemlich klar: < /p>

< div class = "snippet-code">

Code: Select all

CSS.registerProperty({
name: '--my-image',
syntax: ' | none',
initialValue: 'none',
inherits: false,
});

class MyWorklet {
static get inputProperties() {
return ['--my-image'];
}

paint(ctx, geom, properties) {
const img = properties.get('--my-image');
console.log(img);
ctx.drawImage(img,10,10,150,180);
}
}
registerPaint('myworklet', MyWorklet);< /code>
< /div>
< /div>
< /p>
Chromium hat dafür keine Unterstützung. Die aktuelle Problemumgehung scheint darin zu sein, die Bilder über das Hintergrundbild zu übergeben:, 

Eigenschaft. Dies wird leider mit der Registrierung der Lack-Working als Hintergrund-Image kollidieren (

Code: Select all

background-image: paint(worklet); background-clip: text;

).
Was sind andere Möglichkeiten, Bilder in die Lack -Working zu übergeben? Muss nicht unbedingt durch CSS -Variablen erfolgen. Mir geht es gut mit hartcodieren oder importieren Bildern direkt in die Farbwebstimmung.