Question

我正在使用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>

Answer 1

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

../不是写路径的正确方法，取消那个位，你应该是金色的，就像这样：

(images/banner.jpg);

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

Answer 2

你可以试试这条路径“〜/ Images / Banner.jpg”。对我来说，有时一些路径不起作用，而另一些则不起作用。有时解决这个问题。

Answer 3

链接到css文件：

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

另外，对于图像

没有显示在divbox的背景横幅

3 个答案: