javascript background - Configurando a imagem de fundo usando a propriedade CSS do jQuery




html color (9)

Eu tenho um URL de imagem em uma variável imageUrl e estou tentando configurá-lo como estilo CSS, usando jQuery:

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

Isto parece não estar funcionando, como:

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

none retorna none .

Alguma idéia, o que estou fazendo errado?


Answers

Você vai querer incluir aspas duplas (") antes e depois do imageUrl assim:

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

Dessa forma, se a imagem tiver espaços, ela ainda será definida como uma propriedade.


Interpolação de string para o resgate.

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);

Alternativamente ao que os outros estão sugerindo corretamente, acho mais fácil alternar as classes CSS, em vez de configurações CSS individuais (especialmente URLs de imagem de plano de fundo). Por exemplo:

// 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');

Para aqueles que usam um URL real e não uma variável:

$('myObject').css('background-image', 'url(../../example/url.html)');

Além das outras respostas, você também pode usar "background". Isso é particularmente útil quando você deseja definir outras propriedades relacionadas ao modo como a imagem é usada pelo plano de fundo, como:

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

Aqui está o meu código:

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

Aproveite, amigo


$('myObject').css({'background-image': 'url(imgUrl)',});

Tente modificar o atributo "estilo":

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

No Firefox e no Internet Explorer, a cor normal do texto de entrada substitui a propriedade color dos espaços reservados. Então, precisamos

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}






javascript jquery css