背景图像css不显示答案

【问题标题】：Background-image css does not display背景图像css不显示
【发布时间】：2015-02-18 19:32:32
【问题描述】：

这有点尴尬，但我卡住了。这是我的 index.html：

<header>
    <div class="wrapper">
        <div class="top_menu">
        </div>
    </div>
</header>

这是我的 style.css：

body{ 
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12 px;
}
.wrapper{ width:1680 px; margin:0 auto }
header{float:left; width:100%; min-width:1680 px} 

.top_menu{ background-image:url('../images/top_menu.jpg');}

我在索引中包含了<link rel="stylesheet" type="text/css" href="css/style.css"> 标签。根文件夹包含： index.html 、 css 文件和图像文件（根子文件）。你能帮帮我吗？

【问题讨论】：

如果 css 文件和图像文件位于根目录中，则将路径更改为 CSS style.css 并在 CSS 中将图像路径更改为 'top_menu.jpg'
.top_menu 里面有内容吗？如果那里什么都没有，则没有定义高度，您将看不到任何东西。
您的top_menu 似乎没有内容，也没有明确的高度。因此它没有高度，因此没有可见的背景。
您可以将min-height: 100px; 添加到您的.top_menu 以便您可以看到一些东西
这太尴尬了！ @austinhedeveloper 你是对的！没有高度！天哪！

标签： html css

【解决方案1】：

GolezTrol 说得对。标头需要一个明确的高度，因为 top_menu 中没有任何内容可以给它一个高度。

.top_menu{ 
  background-image:url('https://www.google.com/images/srpr/logo11w.png');
  height: 100px;
}

如果要设置背景图片的高度：Set size on background image with CSS?

有关height 工作原理的更多信息：

height:100% 表示该元素将具有 100% 的高度它的父容器。

height:auto 表示，元素将具有灵活的高度，即它的高度将取决于它的子元素的高度

上述说明中包含的示例：difference between css height : 100% vs height : auto (answer)

【讨论】：

感谢我 :)（还有你）

【解决方案2】：

正如 JSuar 所说，您必须确保您的 div 具有最小高度或某些内容。然后，如果您将图像放在根级别的文件夹中，则可能必须将其放入：

.top_menu{ background-image:url('/folder_name/images/top_menu.jpg');}

另外，您可以在此站点检查您的 css 代码：http://jigsaw.w3.org/css-validator/#validate_by_input 以确保没有代码错误。

问候。

【讨论】：

【解决方案3】：

如果您希望 .top-menu div 自动调整（手动设置高度），另一种方法是使用 img 标签而不是 CSS background-image 方法。

<header>
    <div class="wrapper">
        <div class="top_menu">
            <img src="../images/top_menu.jpg" alt="some image">
        </div>
    </div>
</header>

【讨论】：