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

【问题标题】：Background Image In Aspx Content Page Won't Change On Page LoadAspx 内容页面中的背景图像在页面加载时不会更改
【发布时间】：2014-02-03 11:23:32
【问题描述】：

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

我有一个 Asp.Net 站点，有一个“母版页”和几个“内容”页
有一个 CSS 文件成功地在正文中分配了一个“背景图像” - 用于所有页面：

body { background-image: url('../Images/TestImage1.jpg'); }
我有另一个图像，例如 TestImage2.jpg，它位于解决方案中的同一图像文件夹中，我想在特定的该页面加载时的“内容页面”。然而，它没有加载到页面上，背景只是变成白色而没有任何图像 - 这是我的代码：

我的 MasterPage 中有 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 一起使用。

【问题讨论】：

文件背后的代码是否存在于 int 根文件夹中？
我刚刚尝试了您的代码，它在我创建的一个简单页面上运行良好。您是否使用浏览器的开发者工具检查了 CSS？

标签： c# javascript asp.net

【解决方案1】：

我建议根本不要使用 javascript。您应该在标题部分有一个方便的ContentPlaceHolder。在其中添加以下内容以覆盖默认的正文样式

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

因为这将出现在母页的头部内容之后的页面中，它将覆盖早期的 CSS。

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

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

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

如果你真的想坚持使用 javascript。检查路径或使用 Root Relative。请记住，路径与调用资源的文档相关。因此，仅仅因为路径在 CSS 文件中有效，并不意味着它可以在位于网站不同级别的页面中有效。使用 CSS 调试工具，例如用于 Firefox 的 FireBug（免费下载）或 Chrome 中的开发者工具（内置）来检查图像是否位于预期位置。

【讨论】：

【解决方案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 完成。 :)

【讨论】：

是的，但问题仍然是当你可以使用 CSS 时为什么要使用 javascript？任何人，我很高兴你能成功。