用背景圖像覆蓋身體

Question

我有一個固定height的網頁。 現在，我要用背景圖像填充整個body 。 背景必須縮放以適合 。

我嘗試了background-size: cover ，它的功能完全符合我的要求，盡管height超出了body 。 例如： http : //jsfiddle.net/7c6o4aox/1/ 。

如何使背景圖像僅覆蓋人體？ 是否可以在背景上設置max-height ？

Answer 1

該問題是由於瀏覽器傾向於讓html也使用body屬性而引起的。 在這種情況下，背景圖像將應用於html 。

為了避免這種情況，一種解決方案是在整個頁面內容周圍放置一個wrapper元素，並為它提供用於正文的大多數樣式。 在這種情況下， main屬性不會應用到DOM樹的更高位置。

 body { margin: 0; } main { background: url(http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg) no-repeat center; background-size: cover; } #content { border: solid red 3px; color: yellow; } 

 <main> <div id="content"> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> </div> </main>