Einstellen des Hintergrundbildes mit der CSS-Eigenschaft jQuery

Question

Ich habe eine Bild-URL in einer imageUrl Variable und ich versuche, es als CSS-Stil, mit jQuery zu setzen:

$('myObject').css('background-image', imageUrl);

Dies scheint nicht zu funktionieren, da:

console.log($('myObject').css('background-image'));

gibt zurück. none .

Irgendeine Idee, was ich falsch mache?

Answer 1

Wahrscheinlich wollen Sie dies (um es wie eine normale CSS-Hintergrundbild-Deklaration zu machen):

$('myObject').css('background-image', 'url(' + imageUrl + ')');

Answer 2

Sie müssen doppelte Anführungszeichen (") vor und nach der imageUrl einfügen, etwa so:

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

Auf diese Weise wird das Bild, auch wenn es Leerzeichen enthält, als Eigenschaft festgelegt.

Answer 3

Alternativ zu dem, was die anderen zu Recht vorschlagen, finde ich es in der Regel einfacher, CSS-Klassen umzuschalten, anstatt einzelne CSS-Einstellungen (insbesondere URLs für Hintergrundbilder). Zum Beispiel:

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

Answer 4

Hier ist mein Code:

$('body').css('background-image', 'url("/apo/1.jpg")');

Viel Spaß, mein Freund

Answer 5

Zusätzlich zu den anderen Antworten können Sie auch "Hintergrund" verwenden. Dies ist besonders nützlich, wenn Sie andere Eigenschaften festlegen möchten, die sich auf die Art und Weise beziehen, wie das Bild vom Hintergrund verwendet wird, wie z. B.:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");