身体填充不适用于背景图像答案

【问题标题】：Body padding not applied to background image身体填充不适用于背景图像
【发布时间】：2016-08-27 02:43:40
【问题描述】：

我正在为我的 body 标签做这样的填充，因为我使用的是导航栏固定顶部。我希望导航栏始终保持在顶部。

body {
   padding-top: 70px;
}

现在我想为 body 添加一个背景图片，并希望它覆盖整个屏幕。所以我这样做了。

body {
   background: url(background.jpg);
   background-size: cover;
}

但问题是导航栏覆盖了图像的一部分，70px 的填充在背景图像上不起作用。请帮助解决这个问题。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

使用background-position中可用的偏移量将背景向下定位70px

Background-Position @ MDN

body {
  background-image: url(http://www.fillmurray.com/g/200/300);
  background-position: top 70px center;
  background-size: cover;
  background-repeat: no-repeat;
}

【讨论】：

【解决方案2】：

默认情况下，背景确实会覆盖填充，是的。

因此一种可能的解决方案是使用background-origin 告诉浏览器背景应该从内容的左上角开始，而不是填充区域。

html {background:white; height:100%}
body {
  box-sizing:border-box; min-height:100%;
  padding-top:70px;
  background: url(http://www.fillmurray.com/g/200/300);
  background-origin: content-box;
  background-size: cover;
  background-repeat: no-repeat;
}

这将具有动态的优势；即，如果更改了填充的值，则无需更改其值。

【讨论】：