Question

我正在尝试构建类似于此标题的标题：http://themes.tf/preview/?momentum

我设置了一个高度，但div仍然无法显示，内容滑到顶部。我该如何解决这个问题？

css是：

.header {
    position:relative;
    display:block;
    width:100%;
    z-index:1;
    height:688px;
}


.bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

这是html：

    <div class="header bg-img" style="background-image: url('img/xlheader_s.jpg');">

        <img src="img/schwager-baubetruung_logo.png" id="logo" alt="schwager baubetreuung logo">

    <nav>
        <ul>
            <li class="current"><a href="index.html">Startseite</a></li>
            <li><a href="about.html">Über uns</a></li>
            <li><a href="arbeitsablauf.html">Unsere Arbeit</a></li>
            <li><a href="galerie.html">Galerie</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="impressum.html">Impressum</a></li>
        </ul>
    </nav>
</div>

在这里，您可以看到实时版本：http://suitsncats.de/index_copy.html

如果你转到索引页面，你可以看到我之前的尝试有效，但有一个静态标题图片。

Answer 1

我查看了您网站上的来源并遇到了两个问题：

您已在#header中使用了ID选择器（.header）而不是类选择器（style_copy.css），并且其中也存在语法错误（在;声明之后没有height

#header {
    position:relative;
    top:0px;
    left:0;
    height:668px
    z-index:1;
}

/* should become: */

.header {
    position:relative;
    top:0px;
    left:0;
    height:668px; /* <--- note ; */
    z-index:1;
}

Answer 2

在您的实时版本中，我已检查了您的CSS文件style_copy.css，并注意到您告诉CSS查找#header，即使您在HTML中使用{ {1}}。

您还忘记了.header声明后的;。

<强>解决方案：

在实时版本的CSS中更改此内容：

height

对此：

#header {
    position:relative;
    top:0px;
    left:0;
    height:668px;
    z-index:1;
}

希望这有帮助！

Answer 3

您好我在实时网站上查看了您的来源，请尝试以下解决方案：

<div class="header bg-img" style="background-image: url('img/xlheader_s.jpg');">
            <img src="img/schwager-baubetruung_logo.png" id="logo" alt="schwager baubetreuung logo">

        <nav>
        <ul>
            <li class="current"><a href="index.html">Startseite</a></li>
            <li><a href="about.html">Über uns</a></li>
            <li><a href="arbeitsablauf.html">Unsere Arbeit</a></li>
            <li><a href="galerie.html">Galerie</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="impressum.html">Impressum</a></li>
        </ul>
    </nav>
    </div>

和CSS：

.header {
    position: static;
    height: 100px;
    width: 100%;
    background-color: red;
}

nav {
    width: 50%;
    height: 30px;
    margin: auto;
    display: table;
    z-index: 2;
    text-transform: uppercase;
}

不完全是你想要的，但又向前迈进了一步。

没有显示背景图片的Div /忽略高度

3 个答案: