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

尝试并给出标题（最小/最大）宽度/高度

Answer 2

将css overflow:hidden添加到标题中..并执行相同的操作将来你所有的包装元素。

Answer 3

标题上显示背景图片，但是：

它设置为background-size: cover，这意味着您只能看到最顶部的蓝色部分。据推测，当您有更多内容时，您会看到更多标题，但同时您可以添加min-height: 600px;。
导航具有红色，半透明的背景颜色，位于标题背景颜色的顶部。如果你不想要它，请删除那种红色。

Answer 4

请确定标题的大小，因为它无法填充没有定义大小的标题。

header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100px;
  background: url(../wp-content/uploads/2013/09/Imaginon-pic.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

如果您的样式表位于我通常拥有的子文件夹中，请务必添加＆＃34; ..＆＃34;到你的图像位置告诉css后退一个目录。使用直接路径将需要另一个http请求，这不是一个大问题，但从长远来看会降低您的网站速度。

我包含了webkit后台代码，因为我相信它更容易使用。以及创建浏览器兼容性。

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

4 个答案: