Wie kann ich Bilder an eine CSS -Farb -Working übergeben?
Posted: 06 Feb 2025, 09:02
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"> Eigenschaft. Dies wird leider mit der Registrierung der Lack-Working als Hintergrund-Image kollidieren ().
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.
< /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:,
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.