Javascript 如何使用静态css更改背景图像并对其进行维护？_Javascript_Css_Asp.net Mvc_Twitter Bootstrap 3

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

javascript css asp.net-mvc twitter-bootstrap-3

Javascript 如何使用静态css更改背景图像并对其进行维护？,javascript,css,asp.net-mvc,twitter-bootstrap-3,Javascript,Css,Asp.net Mvc,Twitter Bootstrap 3,我有一个关于MVC中背景图像更改的问题我有一个网站的主要css，在网站内的多个网页，我有一个在用户配置文件内的网页，以改变网站的背景图像我已经设置了4个图片在一行与功能。我也在images div之前输入了javascript，例如在我的问题是当我运行页面时。当我点击图片时，图片不会改变背景。因此，如果我去检查我的“Site.css”（我的主要网页css，我会在这里插入一个gyazo:）的元素和背景图像，我可以通过点击图像来改变背景看起来Site.css是静态的或其他的。网站上使用了引导

我有一个关于MVC中背景图像更改的问题

我有一个网站的主要css，在网站内的多个网页，我有一个在用户配置文件内的网页，以改变网站的背景图像

我已经设置了4个图片在一行与功能。我也在images div之前输入了javascript，例如在

我的问题是当我运行页面时。当我点击图片时，图片不会改变背景。因此，如果我去检查我的“Site.css”（我的主要网页css，我会在这里插入一个gyazo:）的元素和背景图像，我可以通过点击图像来改变背景

看起来Site.css是静态的或其他的。网站上使用了引导，也创建了母版页，这可能是我的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>

@{
Title=“Javascript-更改背景”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
@ViewBag.Title。
var backImage=新数组（）；
背景图像[0]=“/Content/img/Wood_floor_by_gnrbishop.jpg”；
backImage[1]=“水宽.jpg的/Content/img/blue\u wave\u”；
backImage[2]=“/Content/img/Falling-sleep-forest.jpg”；
backImage[3]=“/Content/img/lava.jpg”；
函数更改bgImage（whichImage）{
if（document.body）{
document.body.background=背景图像[whichImage]；
}
}
@Html.ActionLink（“返回个人资料”、“详细信息”）

试试这个

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

这就是生活中的那些小事。你知道。手对面接触。谢谢你，拉文德！顺便说一句，由于代表率低，无法向上投票，对不起！顺便说一句，Ravinder，有没有关于如何为所有具有新背景图像的页面切换主背景图像的线索？为此，您可以使用cookie存储当前图像id或名称，然后在每次页面加载时从cookie中读取，并将背景图像设置为页面