by Guest » 11 Jan 2025, 07:41
Ich frage mich, ob die Eigenschaft „Hintergrundbild“ in Echtzeit über JavaScript bearbeitet werden kann. Was ich versuche, hat ein ähnliches Konzept wie die folgende Frage:
Wie ändere ich das? Farbe des Hintergrunds basierend auf der Mausposition (spezifische Farben)
Aber anstatt den Hintergrund zu bearbeiten, bearbeite ich den Rand und gebe ihm nur in der Ecke, in der sich der Cursor befindet, 100 % Deckkraft.
Die CSS-Methode, die ich ausprobiert habe Den abgerundeten Verlaufsrand zu erhalten, ist wie folgt:
https://gist.github.com/stereokai/36dc0 ... 2ddc60d7a0
In JavaScript war die Methode, die ich durchgeführt habe, wie folgt (mit jQuery 3.7.1 zur Erkennung der Mausposition innerhalb des Elements):
Code: Select all
if(x = middle_y)
{
content.style.backgroundImage = "linear-gradient(#303030, #303030), radial-gradient(circle at bottom right, #8B686B, #00000000, #00000000);";
}
(Inhalt ist das div-Element, das den Rahmen enthält).
Aber nach dem Testen scheint es, dass der Algorithmus keine Wirkung hatte, ebenso wie das Element Der Rand blieb statisch, obwohl der Algorithmus die Position und Ecke erkannte, die der Cursorposition entsprachen.
Danach dachte ich, dass das Hintergrundbild nicht in Echtzeit bearbeitet werden kann .
Soll ich eine andere CSS-Methode ausprobieren? Ist dieser letzte Gedanke falsch?
Vielen Dank

Ich frage mich, ob die Eigenschaft „Hintergrundbild“ in Echtzeit über JavaScript bearbeitet werden kann. Was ich versuche, hat ein ähnliches Konzept wie die folgende Frage:
Wie ändere ich das? Farbe des Hintergrunds basierend auf der Mausposition (spezifische Farben)
Aber anstatt den Hintergrund zu bearbeiten, bearbeite ich den Rand und gebe ihm nur in der Ecke, in der sich der Cursor befindet, 100 % Deckkraft.
Die CSS-Methode, die ich ausprobiert habe Den abgerundeten Verlaufsrand zu erhalten, ist wie folgt:
https://gist.github.com/stereokai/36dc0095b9d24ce93b045e2ddc60d7a0
In JavaScript war die Methode, die ich durchgeführt habe, wie folgt (mit jQuery 3.7.1 zur Erkennung der Mausposition innerhalb des Elements):
[code]if(x = middle_y)
{
content.style.backgroundImage = "linear-gradient(#303030, #303030), radial-gradient(circle at bottom right, #8B686B, #00000000, #00000000);";
}
[/code]
(Inhalt ist das div-Element, das den Rahmen enthält).
Aber nach dem Testen scheint es, dass der Algorithmus keine Wirkung hatte, ebenso wie das Element Der Rand blieb statisch, obwohl der Algorithmus die Position und Ecke erkannte, die der Cursorposition entsprachen.
Danach dachte ich, dass das Hintergrundbild nicht in Echtzeit bearbeitet werden kann .
Soll ich eine andere CSS-Methode ausprobieren? Ist dieser letzte Gedanke falsch?
Vielen Dank :)