asp.net 使用单个母版页将背景图像添加到几个页面答案

【问题标题】：asp.net add background image to a few pages using single masterpageasp.net 使用单个母版页将背景图像添加到几个页面
【发布时间】：2011-12-14 16:28:12
【问题描述】：

我正在尝试将背景图像添加到只有几个页面，而其他页面没有。对于带有背景图像的页面，我是否需要单独的母版页，或者我可以通过覆盖现有样式来做到这一点？

我最后一次尝试有一个带有图像的嵌套 div...

带背景的页面：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master"         AutoEventWireup="true" CodeBehind="Burgundy.aspx.cs" Inherits="WineCellar.UI.Pages.Burgundy.Burgundy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ApplicationContent" runat="server">
<div style="background-image: url(~/Images/burgundy.png); height: 430px; width: 940px;">
</div>
</asp:Content>

母版页：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="WineCellar.UI.MasterPage"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" type="text/css" href="/Styles/Site.css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="PageWrapper">
        <div id="Header"><a id="A1" href="~/" runat="server">need a header</a></div>

        <div id="MenuWrapper"> 
            <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"  
                Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
                <StaticMenuItemStyle HorizontalPadding="6px" VerticalPadding="2px"/>
                <DynamicHoverStyle BackColor="#CC3300" ForeColor="#310062" />
                <DynamicMenuStyle BackColor="#310062" />
                <StaticSelectedStyle BackColor="#CC3300" />
                <DynamicSelectedStyle BackColor="#310062" />
                <DynamicMenuItemStyle HorizontalPadding="6px" VerticalPadding="4px"/>
                <StaticHoverStyle ForeColor="White" BackColor="#310062" />
            </asp:Menu>

            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
        </div>
        <div id="MainContent">
            <asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="breadCrumbTrail">
                <RootNodeTemplate></RootNodeTemplate>
            </asp:SiteMapPath>
            <br />
            <h1>Title</h1>
            <br />
            <br />
            <asp:ContentPlaceHolder ID="ApplicationContent" runat="server"></asp:ContentPlaceHolder>
         </div>
        <div id="Footer"><%=DateTime.Now.Year.ToString() %></div>
    </div>
    </form>
 </body>
</html>

主要内容风格：

#MainContent 
{
    background-color: #310062;
    width: 940px;
    height: 480px;
    color: #ffffff;
    min-height: 480px;
    padding: 10px;
    font-size: 0.8em;
    float: left;
}

感谢您的帮助！

【问题讨论】：

标签： asp.net background-image master-pages

【解决方案1】：

在头部放置一个内容占位符，并在每个页面中放置一个样式标签，其中包含额外的 div 样式。可能不是最好的方法，但只适用于几页。

<style>#MainContent{background-image:url(~/Images/burgundy.png);height:430px;width:940px;</style>

这应该覆盖您在外部 css 文件中设置的样式。（虽然理想情况下所有的 css 都应该放在外部 css 文件中，而不是样式标签中）

【讨论】：

我之前确实尝试过。图像未渲染。我也尝试在“区域”周围设置边框，但它没有渲染。我已经通过在页面上放置一个
在这种情况下，您是否尝试过<div id="MainContent" <asp:Literal id="ltlClass" runat="server"></asp:Literal>>，然后将 ltlClass.Text 设置为“class='new-background'”
感谢科林 - 我还不知道我的解决方案，但我已将图像物理地放在与页面相同的目录中，现在正在渲染。我有某种路径问题，我应该能够弄清楚。我认为如果不是这条路，我之前厌倦的一切可能都会奏效。仅供参考 - 我将采用所有样式并将它们放入 .css 以进行更清晰的编码 - 再次感谢！

【解决方案2】：

仅为子页面创建一个样式表。使用 body 标签应用 CSS 样式。

body {
    background-image: url('images/background-image.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    vertical-align: top;
    background-position: 0% 20%;
}

经过测试且有效的解决方案。

【讨论】：