Question

您好我制作了这个非常简单的CSS应该在div上显示背景图像，它可以在Dreamweaver上运行但根本不在任何浏览器上，我真的不知道为什么，是从w3学校复制粘贴，在哪里例如，它适用于浏览器以及代码。

#container{
    position:relative;
    background-image: url(../img/bottom_line_header.png);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:bottom;
}
.main_wrapper{
    width:1000px;
    position:absolute;
    top:30px;
    left:50%;
    margin-left: -500px;
}
.header_button{
    float:right;
    height:60px;
    width:130px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: right;
    margin-left: 5px;
    text-height:200%;
}

这是HTML

<body>
<div id="container" class="main_wrapper">
<div id="container">
<div class="header_button">Contact us</div>
<div class="header_button">Media</div>
<div class="header_button">About us</div>
</div>
</div>
</body>

和顺便说一下，如果它出现，图像的链接是正确的：D

Answer 1

您在HTML中使用了两次ID container。 ID必须是唯一的。

Answer 2

您没有在container上设置任何高度，这意味着它的高度将由其内容定义。在这种情况下，内容全部浮动，浮动元素不会影响其父元素的高度。

此外，id属性在页面上应该是唯一的，因此有两个id为container的元素不正确。

Answer 3

确保路径正确：

#container{
    position:relative;
    background:url(../img/bottom_line_header.png) bottom no-repeat;
}

在这种情况下，您将从当前文件夹移出img文件夹。

-www 
   -css  //say your style sheet is here.
   -img  //your image needs to be here.

确保#container有一个高度，一个ID是唯一的，你有2个具有相同身份的元素。

Answer 4

检查以确保路径正确...

这个

background-image: url(../img/bottom_line_header.png);

可能需要更改为

background-image: url(/img/bottom_line_header.png);

或者

background-image: url(img/bottom_line_header.png);

Answer 5

你没有设置#container宽度/高度，因为你有浮动元素，高度不会扩展。你必须在header_buttons之后清除浮点数。

     <div style='clear:both'></div>

此外，每个元素的id标记都必须是唯一的。

CSS背景没有显示

5 个答案: