Question

我已经在网上搜索并搜索了这个答案，但我还没有找到一个“明确说明”的答案，说明为什么会这样。而且我重新工作无济于事。

我有一个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一起工作。

Answer 1

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

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

由于这将出现在materpage的头部内容之后的页面中，它将覆盖早期的CSS。

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

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

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

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

Answer 2

经过多次争吵，移动一些东西并在CSS样式表中隔离它们以清理Master页面，我在那里有一些流浪的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 个答案: