Question

这有点令人尴尬，但我陷入困境。这是我的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文件和images文件（roots children）。你能帮帮我吗？

Answer 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）

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，以确保没有代码错误。

问候。

Answer 3

如果您希望.top-menu div自动调整（手动设置高度），则可以选择使用img标记而不是CSS background-image方法。< / p>

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

背景图像css不显示

3 个答案: