未在divbox中顯示背景橫幅

我正在使用html和CSS爲ASP.NET創建主頁面。然而，與其餘的圖片不同，我的頂級橫幅無法正常工作。但它確實顯示在Visual Studio的設計選項卡上。我只在下面放置必要的代碼，有人可以幫忙嗎？未在divbox中顯示背景橫幅

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>

來源

2013-11-21 NetUser101

你嘗試過用'背景image'，而不是'background'？ – DaniP

如果你可以創建一個小提琴鏈接並在那裏複製問題，我想你會得到答案 – Ani

它實際上是這樣的在您的代碼？：background: url(../Images/Banner.jpg);

的../是不寫的路徑，採取咬下的正確方法，你應該是金色的，就像這樣：

(images/banner.jpg);

編輯：我也建議把旗幟在<div>，給它是一個ID並使用position: fixed; top: 0px;將其附加到頁面的頂部。請記住給它一個寬度和高度，否則它不會顯示。

來源

2013-11-21 16:13:26 Mockingbird

'../'你真的知道這是如何工作的？如果你需要在路上退一步，如何避免它？ – DaniP

是的，但如果該圖像只在圖像文件夾中，爲什麼需要在路徑中後退？如果它是這樣寫的，它在圖像文件夾中將不會顯示。 – Mockingbird

實際上，如果沒有../ – NetUser101

你可以試試這個路徑「〜/ Images/Banner.jpg」。對我而言，有時候有些路徑不行，有些則不行。有時解決如此。

來源

2013-11-21 16:15:15

鏈接到CSS文件：

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

此外，在圖像

來源

2013-11-21 16:19:45 Ani

已鏈接。我只是沒有在上面的代碼中添加該部分 – NetUser101

未在divbox中顯示背景橫幅

回答

相關問題