html - 背景图片不会显示在标题中？

Question

我是 CSS 的新手，我的页眉图像没有显示。每当我尝试将它添加到我的页眉时，导航栏会变成稍微深一点的红色？你和你的天才头脑想出来了!

CSS:

    header {
    background: url("http://www.charlottecentercity.org/wp-content/uploads/2013/09/Imaginon-pic.jpg");
    background-size: cover;
    image-repeat: no-repeat;
    }
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 70px;
    display: inline;
    }
    li {
    display: inline;
    }
    nav {
    background: rgba(255,0,0,0.5);
    }
    nav img {
    height: 60px;
    margin: 5px;
    float: left;
    }

html:

    <header>
    <nav>
    <img src="https://dl.dropboxusercontent.com/u/105222237/RGBjpeg.png" />
        <ul>
            <li><a href="#">About Imaginon</a></li>
            <li><a href="#">General Info</a></li>
            <li><a href="#">Programs and Events</a></li>
            <li><a href="#">Plan Your Visit</a></li>
            <li><a href="#">Just for Fun</a></li>
        </ul>
    </nav>
</header>

Answer 1

背景图像是显示在页眉上，但是:

• 它被设置为 background-size: cover，这意味着您只能看到最顶部的蓝色部分。据推测，当您有更多内容时，您会看到更多标题，但同时您可以添加 min-height: 600px;，例如。

• 导航栏的背景色是微红色的半透明背景色，位于标题背景色之上。如果您不想要红色，只需将其移除即可。