如何使用静态css更改背景图像并维护它? [英] How to change background image with static css and maintain it?

查看：26 发布时间：2021/9/11 19:34:52 javascript css asp.net-mvc twitter-bootstrap-3

本文介绍了如何使用静态css更改背景图像并维护它?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我已经用函数在一行上设置了 4 张图片.我还在图像 div 之前输入了 javascript，例如在

的顶部

我的问题是当我运行页面时.当我点击图像时，图像不会改变背景.因此，如果我去检查元素并打开我的Site.css"的背景图像(我的主网页 css，我在这里扔了一个 gyazo:http://gyazo.com/169070689792884090f1d9a9c9b96158).

好像 Site.css 是静态的什么的.网站上使用了 Bootstrap，还创建了一个母版页，这可能是我的 pov 中缺少的一点.

另外，我将如何保存图像以在所有页面上保留背景?`

这是我用于图像背景的 cshtml 代码:

@{ViewBag.Title = "Javascript - 更改背景";布局 = "~/Views/Shared/_Layout.cshtml";}<h2>@ViewBag.Title.</h2><!DOCTYPE html><html lang="zh-cn"><头><title></title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="ButtonChangeBackground.css"><身体><脚本语言=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";函数 changeBGImage(whichImage) {如果(文档.正文){document.body.background = backImage[whichImage];}}<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>

<p><div class="btn btn-default col-md-offset-2 ">@Html.ActionLink("返回个人资料", "详细信息") </div></p></html>

解决方案

试试这个

<代码>...函数 changeBGImage(whichImage) {如果(文档.正文){document.body.style.backgroundImage = 'url(' + backImage[whichImage] + ')';}}...

I have a question about background image change in MVC.

I have a main css for the website, multiple webpages within the website and i have a webpage within the user profile to change the background image of the website.

I have set up 4 pictures on a row with function. I also have typed in a javascript prior to the images div, e.g in the top of

My problem is that when i run the page. the images wont change background when i click on the images. Thus I can change the background by image click if i go to inspect element and turn of background-image of my "Site.css" ( my main webpage css, ill throw in a gyazo here: http://gyazo.com/169070689792884090f1d9a9c9b96158).

Seems like the Site.css is static or something. Bootstrap is used on the website, also a masterpage is created, could that be a missing point from my pov.

also, how would I save the image to remain background on all pages afterwards?`

here is my cshtml code for image backgrounds:

@{
    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>

解决方案

try this

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

这篇关于如何使用静态css更改背景图像并维护它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何使用静态css更改背景图像并维护它? [英] How to change background image with static css and maintain it?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何使用静态css更改背景图像并维护它? [英] How to change background image with static css and maintain it?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭