divbox 中未显示背景横幅答案

【问题标题】：Background banner not showing in divboxdivbox 中未显示背景横幅
【发布时间】：2013-12-06 05:17:18
【问题描述】：

我正在使用 html 和 CSS 为 ASP.NET 创建母版页。但是，与其他图片不同，我的顶部横幅不起作用。但是，它确实显示在 Visual Studio 的设计选项卡上。我只在下面放置了必要的代码，有人可以帮忙吗？

HTML：

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">        
        <div id="container">
            <div runat="server" id="top">
                        </div>
                </div>
    </form>
</body>
</html>

CSS：

    body 
{
    background-image: url(../Images/background_5.jpg);
    /*font-family: Arial;
    color: rgb(0, 0, 0);
    background-color: rgb(225, 201, 201);
    line-height: normal;
    font-size: 12px;
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;*/
}

#form1
{
    width: 1200px;
}

#container
{
    background-color: White;
    padding-left: 20px;
    padding-right: 20px;
    float:left;
    left: 50%;
    position:relative;
    margin-left: -450px;
    width: 910px;
    height: 1800px;
}

#top
{
    background: url(../Images/Banner.jpg);
    /*padding-left: 10px;*/
    height: 250px;
    width: 900px;   
}

#loginDiv
{
    float: right;
    padding-right: 20px;
    text-align: right;
    height: 142px;
    font-family:Century Gothic;
}

#middle
{
    padding-left: 10px;
    width: 900px;
}

如果您想查看完整的 HTML 代码，附在下面：

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">        
        <div id="container">
            <div runat="server" id="top">

                <asp:Label ID="WelcomeLabel" runat="server" Text="Label" Font-Italic="False" 
                    Font-Names="Century Gothic" Font-Overline="False" Font-Size="Medium"></asp:Label>
                    <br />
                <asp:Button ID="Button1" runat="server" Text="Sign out" BackColor="Black" 
                    BorderColor="Black" BorderStyle="Outset" Font-Names="Century Gothic" 
                    ForeColor="White" Width="75px" />

                <br />

               <div id="loginDiv" runat="server">
                     <asp:Label ID="Label1" runat="server" Text="Username"></asp:Label>
                     &nbsp;&nbsp;&nbsp;
                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <br />
                    <br />
                    <asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
                    &nbsp;&nbsp;&nbsp;
                    <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
                     <br />
                     <br />
                    <asp:Button ID="Button2" runat="server" Text="Login" 
                         BackColor="Black" BorderStyle="Outset" Font-Names="Century Gothic" 
                         ForeColor="White"/>
                     <br />
                    <asp:Label ID="Label3" runat="server"></asp:Label>
                    </div>
            </div> 

            <div runat="server" id="middle">
                <div id="left" runat="server" style="float: left; width: 33%; margin: 0; ">
                    Categories
                    <ul>
                        <li>option 1</li>
                        <li>option 2</li>
                        <li>option 3</li>
                        <li>option 4</li>
                    </ul>

                    <div>
                        <asp:Label ID="lblItemsShoppingCart" runat="server" Text=""></asp:Label>
                    </div>
                </div>
                <div id="Right" runat="server" style="float: left; width: 67%; margin: 0; " class="sf_colsOut">                 
                        <asp:contentplaceholder id="contentplace" runat="server" />                 
                </div>
            </div> 
            </div> 

    </form>
</body>
</html>

【问题讨论】：

你试过用background-image代替background吗？
如果你可以创建一个小提琴链接并在那里复制问题，我想你会得到答案

标签： asp.net css image html

【解决方案1】：

在您的代码中实际上是这样的吗？：background: url(../Images/Banner.jpg);

../ 不是写路径的正确方法，去掉那一点，你应该是金子，像这样：

(images/banner.jpg);

编辑：我还建议将横幅放在<div> 中，给它一个ID 并使用position: fixed; top: 0px; 将其附加到页面顶部。记得给它一个宽度和高度，否则它不会显示。

【讨论】：

../ 你真的知道这是怎么回事吗？如果您需要退后一步，如何避免它？
是的，但如果该图像只是在图像文件夹中，为什么需要在路径中后退一步？如果它是这样写的，并且它在 images 文件夹中，它将不会显示。
其他图像以该路径显示。所以我怀疑这就是问题所在。我没有在新的 div 中设置它，因为我在横幅上有文本框和按钮，所以它必须是背景图片。
是否可以重新定位文件？如果从目录一直到根目录仍然没有正确检索文件，那可能是浏览器正在做一些古怪的事情？

【解决方案2】：

你能试试这个路径 "~/Images/Banner.jpg" 吗？对我来说，有时有些路径行不通，有些则不行。有时会这样解决。

【讨论】：

【解决方案3】：

css文件链接：

 <link href="~/css/StyleSheet.css" rel="stylesheet" type="text/css" />

还有图片

【讨论】：