Question

我正在为我的身体标签做填充，因为我使用导航栏固定顶部。我希望导航栏始终保持最佳状态。

body {
   padding-top: 70px;
}

现在我想向身体添加背景图像，并希望它覆盖整个屏幕。所以我这样做。

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

但问题是导航栏覆盖了部分图像，70px填充不适用于背景图像。请帮忙解决这个问题。

Answer 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;
}

Answer 2

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

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

＆＃13;

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;
}

＆＃13;

这个具有动态的优势;即，如果更改了填充的值，则不需要更改其值。

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

2 个答案: