Question

我试图允许我的用户动态更改特定DIV的背景图像。他们这样做是通过HTML表单上传图像，一旦图像上传，我使用JQuery来更新DIV的背景。

我知道之前已经多次询问并使用我在线上找到的示例我可以替换背景图像，但是如果用户想要上传新图像并再次更改它则无法工作。

看来我只能更改一次图像，除非我刷新页面，否则后续更改都不会发生。

我的DIV正在使用以下CSS

#background
{
    width:450px;
    height:200px;
    background-color: #FFFFFF;
    background-image: url("images/background.png");
    background-repeat: no-repeat;
    #background-size: contain;
    background-size: cover;
}

Onload DIV有一个默认的背景图像，用户通过表单上传图像并使用以下JQuery我将图像更改为新上传的文件。

$('#background').css("background-image", "url(" + filename + ")");

filename是上传文件的名称。这一切都很好，并显示新的图像。

如果我上传另一个文件，我可以在上传文件夹中看到文件已正确更改，但DIV背景不会改变。

我注意到的一件事是，在第一次更改后，Chrome会显示DIV的CSS，并显示以下未标记的内容。 background-image: url(images/bacground.png);，现在看来DIV也有一个分配给它的样式，并以新文件的名称作为背景。

我如何做到这一点，以便他们可以随时改变背景？

由于

Answer 1

Chrome设置您的background-image样式未被剔除并不奇怪，因为jquery将background-image设置为元素的内联样式，该样式的优先级始终高于css文件中的样式。

可能是您使用新文件更改旧文件，而它们具有相同的名称且Chrome不会更新后台，因为他的缓存中包含具有给定名称的旧文件。您应该使用新名称加载文件并重置background-image。

Answer 2

这里我做了一个简单的例子，它会在点击按钮时显示背景图像。在这个例子中，我已经采用了图像url数组并将随机图像设置为背景图像。这对我来说很好。如果这对您不起作用，请告诉我。获取要上传的图像的完整网址，并将其设置为要设置为背景图像的容器。

$(document).ready(function(){
var filename = "https://images-na.ssl-images-amazon.com/images/G/01/gateway/editorial/unrec/col-3/shipping-couple._CB509889188_.png";
//$('#background').css("background-image", "url(" + filename + ")");
document.getElementById("background").style.backgroundImage="url(" + filename + ")";
});

$("#changeBG").on("click", function () {
    var newarray = new Array();
    newarray[0] = "https://images-eu.ssl-images-amazon.com/images/I/41BcvUwPa0L._AC_UL260_SR200,260_.jpg";
    newarray[1] = "https://images-eu.ssl-images-amazon.com/images/I/31CvVeyn6OL._AC_UL260_SR200,260_.jpg";
    newarray[2] = "https://images-eu.ssl-images-amazon.com/images/I/51zMvKTKfzL._AC_UL260_SR200,260_.jpg";
    newarray[3] = "https://images-eu.ssl-images-amazon.com/images/I/31mxJooj4gL._AC_UL260_SR200,260_.jpg";
    newarray[4] = "https://images-eu.ssl-images-amazon.com/images/I/41brFl-yibL._AC_UL260_SR200,260_.jpg";
    var randomnumber = randomNumberFromRange(0, 4);
    document.getElementById("background").style.backgroundImage = "url(" + newarray[randomnumber] + ")";
});

function randomNumberFromRange(min, max)
{
    return Math.floor(Math.random() * (max - min + 1) + min);
}

#background
{
  border:1px red solid;
    width:450px;
    height:200px;
    background-color: #FFFFFF;
    background-image: url("images/background.png") 50% 50%;
    background-repeat: no-repeat;
    #background-size: contain;
    background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="background">

</div>
<input type="button" id="changeBG" value="Change Background Image">

Jquery动态替换背景图像

2 个答案: