如何使用靜態CSS更改背景圖像並進行維護？

Question

我對MVC中的背景圖片更改有疑問。

我有一個用於網站的主要CSS，該網站內有多個網頁，並且我的用戶個人資料中有一個網頁可以更改網站的背景圖片。

我已經連續設置了4張圖片。 我還輸入了圖像div之前的javascript，例如在

我的問題是，當我運行頁面時。 當我單擊圖像時，圖像將不會更改背景。 因此，如果我去檢查元素並轉到“ Site.css”的背景圖像（我的主要網頁css，這里有gyazo，請點擊這里），我可以通過單擊圖像來更改背景： http ://gyazo.com/169070689792884090f1d9a9c9b96158 ）。

似乎Site.css是靜態的。 網站上使用了Bootstrap，還創建了一個母版頁，可能這是我的觀點中缺少的一點。

另外，以后如何保存圖像以使其在所有頁面上保持背景？

這是我的圖像背景的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 個解決方案

解決方案1
0 已采納 2014-05-08 12:10:36

如何使用靜態CSS更改背景圖像並進行維護？

問題描述

1 個解決方案

解決方案1 0 已采納 2014-05-08 12:10:36

解決方案1
0 已采納 2014-05-08 12:10:36