Question

我刚刚发现了CSS background-size: cover属性，但我希望左侧导航后面的区域为黑色。我试图在图像本身留下黑色空间，但是当它调整大小时，会被裁掉。

我怎么能这样做，以便我的图像自动调整大小，但在左侧导航下留下黑色空间？想法/建议？

CSS：

html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}
#container {
    min-height: 100%;
    position: relative;
    height: 100%;
}
#header {
}
#body {
    padding-bottom: 100px;
}
#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
}
.logo {
    font-family: Didot;
    font-size: 4.5em;
    color: #FFF;
}
.main_nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.footer_text {
    font-family: Garamond;
    font-size: 14px;
    color: #FFF;
}
.main_nav li {
    margin: 5px;
}
.main_nav li a {
    color: #FFF;
    text-decoration: none;
    font-size: 32px;
    font-family: Garamond;
    font-variant: small-caps;
}

HTML：

<body>
<div id="container">

  <div id="header">
    <div class="logo">C</div>

    <ul class="main_nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="music.html">Music</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>

  <div id="body">

  </div>

  <div id="footer">

  </div>

</div>
</body>

Answer 1

只需重新定位背景：

html {
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    /* ... */
}

Here is a demo.

如何使用CSS背景大小：封面;但是留下菜单的空间？

1 个答案: