【问题标题】：HTML div id background image not showing when its identical to another id?HTML div id背景图像与另一个ID相同时不显示？
【发布时间】：2014-06-25 00:15:09
【问题描述】：

这是我页面的 css 样式表，它让我发疯的图像将显示为 navi id 但不是主ID，为什么？我最初使用了不同的图像它不起作用所以我将它更改为相同的图像并且仍然没有显示页面不是背景图像，是因为它是浮动 div 还是什么？还是因为它是 div 中的 div？

body{
        background-color: gray; /* dont need to call id*/
        font-family: helvetica, sans-serif, arial;  /* set the font for the whole body,                                          use back up fonts too*/
    }

    a{ /*In the same way we targeted the body tag we can target the a tag*/
        text-decoration: none; /* links not underlined*/
            color: red; /* links are coloured red*/
    }

    #container{
        background-color:white;
        width: 800px;
        margin-left: auto; /*to center there container*/
        margin-right: auto;
    }

    h1{ /* using commas i could set it for h1,h2,h3*/
        margin:0; /* gets rid of margin*/
    }

    #header {
        background-color: blue; /* background of div id set to blue */
        color: red; /* text set to red*/
        text-align: center; /* aligns text in the header to middle of page*/
        padding: 0x;
    }

    /* #content{ padding-left:10px and all seperate directions or can use 
        padding: 10px 10px 10px 10px
        1st is top 2nd is right 3rd is bottom and 4th is the left and since want 
        all the same we can shorten even more and just put 10px*/

    #content {
        padding: 10px;
    }

    #navi{
        width:180px;
        height:500px;
        float: left; /*as divs always start a new line to stop this we use float*/
        background-image:url("navi.png");

    #navi ul{
        list-style-type: none; /* gets rid of the bullet points after targeting ul*/
        padding: 0; /*gets rid of padding */
    }

    /*.selected*/ /*#for id . for class*/
    #navi .selected{ /* if we wanted to be more specific if there was selected class elsewhere
                        also if we wanted to select all selected class and navi
                        its #navi, .selected */
        font-weight: bold;
    }
    #main{
        width: 600px;
        height:500px;
        float: right; 
        background-image:url("navi.png");
    }


    #footer{
        clear: both; /* this is to clear of all floating elements or will not appear
                         below, clearing both lets the div element get past all 
                         the floating div elements*/    
        padding: 10px;
        background-color: #999999;
        color: white;
        text-align: right;
    }

我使用的html文件是

<!DOCTYPE html>
<html>
    <head>
        <title> Chill </title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div id="container">
                <div id="header">
             <img src="img.jpg" width="800" height="200" alt="logo" /> <!-- setting 
                                                                            image as header -->
                </div> 

            <div id="content">
                <div id="navi">
                    <h3> Navigation</h3>
                    <ul>
                        <li><a class="selected" href="index.html">Home</a></li> <!-- creating a css class   
                                                                called selected as this is
                                                                 the page we are on -->
                        <li>About</li>
                        <li>Contact</li>
                </div>

                <div id="main">
                    <h2> Home page</h2>
                    <p>CompSci Vs. CompEngineering. </p>    
                    <p>Help me decide, please! </p>
                    <p>Any suggestions on accessible texts on algorithms?</p>
                </div>
            </div>      
            <div id="footer">
            Footer Copyright &copy; Aza
            </div>
        </div>
    </body>
</html>

【问题讨论】：

实际上你使用的是#main，这意味着它的目标是一个id而不是一个类
您的标题建议 2 个节点具有相同的 ID，这是一个禁忌，很可能是您的问题。
我建议先验证你的 CSS，你的 #navi 样式没有右括号：}
提供你的 html 代码，因为我们需要看看它是如何构建的......并且你的 css 检查你的括号：-D
谢谢我在哪里可以验证我的 CSS？很沮丧，我正在阅读诸如“作为容器的 Divs 认为自己的高度为零，因此没有显示颜色。要愚弄他们，您必须放置一个溢出：隐藏”和/或因为它是一个浮动元素，所以它不是背景图像，因此您已将其定义为块元素“显示：块；”当它真正归结为一个简单的语法错误时！我刚才提到的 cmets 有什么意义吗？

标签： html css image background

【解决方案1】：

导航{...

navi 在上面的 css 中没有右括号。

你能提供一段你正在使用的html吗？

【讨论】：

支架起到了作用！！我爱你