Question

我有一个固定height的网页。现在我想用背景图像填充整个body。背景必须缩放到适合。

我尝试了background-size: cover，这正是我想要的，尽管height溢出了body。例如：http://jsfiddle.net/7c6o4aox/1/。

如何使背景图像仅覆盖身体？是否可以在后台设置max-height？

Answer 1

问题是由于浏览器倾向于让body使用html的属性。在这种情况下，背景图像将应用于html。

为避免这种情况，一种解决方案是在整个页面内容周围放置一个包装元素，并将大部分用于body的样式赋予它。在这种情况下，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>

盖体与背景图像

1 个答案: