如何使用CSS Background-size：cover;但留下菜單空間？

我剛剛發現了CSS background-size: cover屬性，但我希望左側的導航背後的區域爲黑色。我試圖在圖像本身留下黑色空間，但是當它調整大小時，它會被裁剪掉。如何使用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>

來源

2013-04-25 pianoman

只是重新定位背景：

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

Here is a demo.

來源

2013-04-25 03:50:56

謝謝！咄！哈哈。 – pianoman 2013-04-25 03:54:54

如何使用CSS Background-size：cover;但留下菜單空間？

回答

相關問題