Aspx内容页面中的背景图像在页面加载时不会更改

Question

我已经在网上搜索并找到了答案，但是我没有找到关于为什么发生这种情况的“明确陈述”的答案。 而且我已经重新工作了，但无济于事。

我有一个Asp.Net网站，带有“母版页”和几个“内容”页
有一个CSS文件可以在正文中为所有页面成功分配“背景图像”：
body { background-image: url('../Images/TestImage1.jpg'); }
我有另一个图像，例如TestImage2.jpg ，它位于解决方案的同一Images文件夹中，并且我希望在加载该页面时在特定的“内容页面”上显示该图像。 但是，它没有加载到页面上，背景变成白色，根本没有任何图像-这是我的代码：

我的母版页具有runat="server"的正确项目：

<head runat="server"> 
<title></title>    
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>

... 并且...

<body runat="server">
<form style="height: 906px" runat="server">

现在，这是我希望内容页面隐藏的代码，我希望新图像出现在Page_Load中：

using System;
using System.Text; 
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class TechCall : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    StringBuilder script = new StringBuilder();
    script.Append("<script type=\"text/javascript\">");
    script.Append("document.body.style.background = \"url('../Images/CPUBack2nd.jpg')\";");
    script.Append("document.body.style.backgroundRepeat = 'no-repeat';");
    script.Append("</script>");

    this.ClientScript.RegisterClientScriptBlock(this.GetType(), "changeBackground", script.ToString());
}    
}

CPUBack2nd.jpg是图像名称的实际值，代替TestImage2.jpg ，但是据我所知，我使用的是图像的正确路径，就像CSS文件中定义默认背景图像的路径一样。 但是，当页面加载时，背景完全没有图像出现-只有空白，原始图像正确显示在其他页面上。

有人可以检查一下并告诉我我在这里缺少什么吗？ 注意：请不要建议使用JQuery，因为它可以使用Javascript来解决，所以我希望坚持使用这种用法，因为我只是想学习使其与JS一起使用。

Answer 1

我建议完全不使用javascript。 标头部分应该有一个方便的ContentPlaceHolder 。 在其中添加以下内容以覆盖默认主体样式

<style type="text/style">
    body  { background-image: url('../Images/TestImage2.jpg'); }
</style>

由于这将显示在母版页标题内容之后的页面中，因此它将覆盖早期的CSS。

我还将考虑特别在母版页上使用根相对路径，因为它使调用文档和被调用资源的相对位置无关紧要。 在这种情况下，请将以上内容更改为：

<style type="text/style">
    body  { background-image: url('/Images/TestImage2.jpg'); }
</style>

假设Images目录位于文档的根目录下。

如果您真的想坚持使用javascript。 检查路径或使用“相对根”。 请记住，该路径与调用资源的文档有关。 因此，仅因为路径在CSS文件中有效并不意味着它会在网站的不同级别的页面中工作。 使用CSS调试工具（如适用于Firefox的FireBug）（免费下载）或Chrome中的开发人员工具（内置）检查图像是否在预期的位置。

Answer 2

经过大量的争论之后，移动了一些东西并将其隔离在CSS样式表中以清理母版页，在那里我有一些杂散的CSS类，并且当然基于Jon P在与Javascript相关的根上提供的“预感” ，这是做什么的：

而不是使用此：

script.Append("document.body.style.background = \"url('../Images/TestImage1.jpg')\";");

答案是使用这个：

script.Append("document.body.style.background = \"url('/MyProjectName/Images/TestImage2.jpg')\";");

所以，我不知道为什么我走遍了世界，似乎能弄清楚这一点，但是我想编程就是这样……区别总是在于小事！

感谢所有帮助我思考这里发生的事情的人！ 因此，该课程也是使用JAVASCRIPT可以完成的。 :)

Aspx内容页面中的背景图像在页面加载时不会更改

问题描述

2 个解决方案

解决方案1
1 2014-02-02 22:47:42

解决方案2
1 已采纳 2014-02-03 03:23:32

Aspx内容页面中的背景图像在页面加载时不会更改

问题描述

2 个解决方案

解决方案1 1 2014-02-02 22:47:42

解决方案2 1 已采纳 2014-02-03 03:23:32

解决方案1
1 2014-02-02 22:47:42

解决方案2
1 已采纳 2014-02-03 03:23:32