将背景图像添加到 asp.net 主网页 asp.net 4.0 和 html5答案

【问题标题】：add background image to asp.net master web page asp.net 4.0 and html5将背景图像添加到 asp.net 主网页 asp.net 4.0 和 html5
【发布时间】：2012-06-20 02:16:25
【问题描述】：

使用 ASP.NET、C#、HTML5 和 CSS3。我的 MasterPage 无法识别我在样式表中设置的背景图像。我在 MSN 开发人员的 ASP.NET 论坛上找到了 2009 年的答案，但仍然无法正常工作。检查代码后，答案与 XHTML 过渡有关，它是 Visual Studio 中 .NET 的默认文档类型。

有什么建议吗？提前谢谢你。

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

    <link href="../changes.css" rel="stylesheet" type="text/css" />
    <link href="../style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <form id="form1" runat="server">
    <div id="PageWrapper">


    html, body {
    background-color: #000;
    background-image: url('../images/darker_wood_1600x1200.jpg');
    background-attachment: scroll;
    background-repeat: repeat-x;
            }






    <!DOCTYPE html>
<html>
<meta charset="utf-8" />

<head><title>

</title>
<link href="changes.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>

    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkM1MGX8QufJ31wnSeINevDB81G3lHsitto4ucLAdg6zs=" />
</div>

    <div id="PageWrapper">

    <div id="Header"><a href="./">Header here
        </a></div>

    <div id="MenuWrapper">Menu here</div>

    <div id="MainContent">


    </div>

    <div id="Sidebar">Sidebar here</div>
    <div id="Footer">Footer here</div>
    </div>

</form>

【问题讨论】：

请发布一小段 HTML + CSS，显示您的母版页生成的样式。
'

'
服务器端在我看来还不错。您还可以抓取浏览器中实际呈现的任何内容吗？当你在它的时候检查浏览器的控制台中是否报告了任何明显的错误（通常可以通过点击 F12 来获得）。
由于某种原因，它没有挖掘样式表开头的@charset...这可能是问题吗？
我是否必须为 onload 页面事件添加一些 C# 代码？我正在本地测试页面。

标签： c# html css background-image asp.net-4.0

【解决方案1】：

这段代码对我有用，但我不知道上面的代码是不是它的样子。因为您在 div 的中间发布了一个样式表值。

另外，如果页面无法读取文件。尝试其他文件或尝试更改文件的搜索路径。也许它无法读取它，因为它在服务器目录之外。因为 CSS 代码看起来是正确的。

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

    <link href="../changes.css" rel="stylesheet" type="text/css" />
    <link href="../style.css" rel="stylesheet" type="text/css" />
    <link href="changes.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /></head>

    <meta charset="utf-8" />
    <style type="text/css">


        // If you want the "Page" background to be this way:
        html, body
        {
            background-color: #000;
            background-image: url('../images/darker_wood_1600x1200.jpg');
            background-attachment: scroll;
            background-repeat: repeat-x;
        }

        // Or the PageWrapper
        div#PageWrapper
        {
            background-color: #000;
            background-image: url('../images/darker_wood_1600x1200.jpg');
            background-attachment: scroll;
            background-repeat: repeat-x;
        }


    </style>
</head>
<body>
    <!--- <form id="form1" runat="server"> --->
    <form method="post" action="Default.aspx" id="form1">
        <div class="aspNetHidden">
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkM1MGX8QufJ31wnSeINevDB81G3lHsitto4ucLAdg6zs=" />
        </div>
        <div id="PageWrapper">

            <div id="Header">
                <a href="./">Header here</a>
            </div>
            <div id="MenuWrapper">
                Menu here
            </div>

            <div id="MainContent">
            </div>

            <div id="Sidebar">
                Sidebar here
            </div>
            <div id="Footer">
                Footer here
            </div>
        </div>
    </form>
    <!--- </form> --->
</body>
</html>

【讨论】：

尝试了您的建议并将样式放入 MasterPage。依然没有。（顺便说一句...代码的最后一部分是来自 css 页面的代码 sn-p，而不是真正位于 PageWrapper div 中）。我检查了路径，当滚动链接时，它显示 jpg 很好。也许我需要将后台请求放在页面加载事件的代码后面。
如果我看你上面的代码，你在 "doctype" 之前有 "head"，你有一个表单 "runat=server" 但没有结束标签，你有多个 head 标签，一个没有结束标签。一切都是sn-ps吗？因为它的发布方式没有意义。我建议您以正确的顺序或整个代码发布它。