Question

我对MVC中的背景图像更改有疑问。

我有一个网站的主要css，网站内的多个网页，我在用户个人资料中有一个网页来更改网站的背景图片。

我已经在功能上连续设置了4张图片。我还在图像div之前输入了一个javascript，例如在

的顶部

我的问题是当我运行页面时。当我点击图像时，图像不会改变背景。因此，如果我去检查元素并转换我的＆＃34; Site.css＆＃34;的背景图像，我可以通过图像点击来改变背景。（我的主要网页css，在这里输入一个gyazo：http://gyazo.com/169070689792884090f1d9a9c9b96158）。

似乎Site.css是静态的或类似的东西。在网站上使用了Bootstrap，也创建了一个主页，这可能是我的pov中缺少的一点。

另外，我如何保存图像以保留后面所有页面的背景？“

这是我的图像背景的cshtml代码：

@{
    ViewBag.Title = "Javascript - Change Background";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@ViewBag.Title.</h2>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="ButtonChangeBackground.css">

</head>
<body>

    <script language="JavaScript">

        var backImage = new Array(); 

        backImage[0] = "/Content/img/Wood_floor_by_gnrbishop.jpg";
        backImage[1] = "/Content/img/blue_wave_of_water-wide.jpg";
        backImage[2] = "/Content/img/Falling-asleep-forest.jpg";
        backImage[3] = "/Content/img/lava.jpg";

        function changeBGImage(whichImage) {
            if (document.body) {
                document.body.background = backImage[whichImage];
            }
        }

    </script>
    <div id="choosebg">
        <button onclick="javascript: changeBGImage(0);"><img id="wood" style="width: 100px; height: 80px;" src="~/Content/img/Wood_floor_by_gnrbishop.jpg" alt="" /></button>
        <button onclick="javascript: changeBGImage(1);"><img id="water" style="width: 100px; height: 80px;" src="~/Content/img/blue_wave_of_water-wide.jpg" alt="" /></button>
        <button onclick="javascript: changeBGImage(2);"><img id="forest" style="width: 100px; height: 80px;" src="~/Content/img/Falling-asleep-forest.jpg" alt="" /></button>
        <button onclick="javascript: changeBGImage(3);"><img id="lava" style="width: 100px; height: 80px;" src="~/Content/img/lava.jpg" alt="" /></button>

    </div>
   <p> <div class="btn btn-default col-md-offset-2 "> @Html.ActionLink("Back to Profile", "Details") </div>

    </p>

</body>
</html>

Answer 1

试试这个

...
function changeBGImage(whichImage) {
  if (document.body) {
     document.body.style.backgroundImage = 'url(' + backImage[whichImage] + ')';
  }
}
...

如何使用静态css更改背景图像并进行维护？

1 个答案: