html - 用背景图像覆盖正文

Question

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

我尝试了 background-size: cover，尽管 height 超出了 body，但它确实满足了我的要求。一个例子:http://jsfiddle.net/7c6o4aox/1/ .

如何让背景图像只覆盖 body ？是否可以在背景上设置 max-height？

Answer 1

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

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