asp.net добавляет фоновое изображение на несколько страниц, используя одну мастер-страницу - PullRequest
Новая
       2

asp.net добавляет фоновое изображение на несколько страниц, используя одну мастер-страницу

0 голосов
/ 14 декабря 2011

Я пытаюсь добавить фоновые изображения только на несколько страниц, где на других страницах их не будет.Нужна ли отдельная мастер-страница для страниц с фоновыми изображениями или я могу сделать это путем переопределения существующих стилей?

Моя последняя попытка имеет вложенный 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;
}

Спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 04 ноября 2016

Создать таблицу стилей только для дочерней страницы. Используйте тег 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%;
}

Проверенное и рабочее решение.

0 голосов
/ 14 декабря 2011

поместите заполнитель содержимого в голову, и на каждой странице поместите тег стиля с дополнительным стилем div. вероятно, не лучший способ сделать это, но будет работать только для нескольких страниц. 

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

это должно переопределить стиль, который вы установили во внешнем CSS-файле. (хотя в идеале все CSS следует размещать во внешних файлах CSS, а не в тегах стиля)

...