Question

我正在制作一个背景为正文的布局。我需要水平和垂直居中。为此，我使用background-position：center。

 background-image:url('address');
  background-repeat:no-repeat;  
  background-position:50% 50%;

但是，背景没有垂直正确定位：您只能看到屏幕顶部的一半图像。请在此处查看link to codepen。

作为一种解决方案，我尝试使用不同大小和背景位置的图像：50％50％。然后我仔细检查了其他背景相关的选择器，发现如果我添加background-attachement并将其从默认值更改为滚动到fixed，而不是图像正确居中。

有人可以解释为什么会这样吗？

Answer 1

如果您没有给body一个高度，则会发生这种情况，因为它的默认值为0.

body的高度取决于其内容，背景图片不会设置它。

以下是展示您需要做什么的示例

html, body {
  margin: 0;
  height: 100%;
}
body {
  background-image: url(http://placehold.it/200);
  background-repeat: no-repeat;
  background-position: center center;
}

有时，当需要为body提供一个高度时，它可以创建其他问题，以及何时，定位div是一个选项

#bkgdiv {
  position: absolute;
  left: 0; top: 0; right: 0; height: 100vh;
  background-image: url(http://placehold.it/200);
  background-repeat: no-repeat;
  background-position: center center;
}

<div id="bkgdiv"></div>

因此，根据您是否/如果需要使用background-attachment: scroll和/或定位div，这里有一个示例显示了当一个滚动（和fiddle demo到玩）

html, body {
  margin: 0;
  height: 100%;
}
body {
  background-image: url(http://placehold.it/200);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
}
#bkgdiv {
  position: absolute;
  left: 0; top: 0; right: 0; height: 100vh;
  background-image: url(http://placehold.it/180/0f0);
  background-repeat: no-repeat;
  background-position: center center;
}
#bkgdivfixed {
  position: fixed;
  left: 0; top: 0; right: 0; height: 100vh;
  background-image: url(http://placehold.it/160/ff0);
  background-repeat: no-repeat;
  background-position: center center;
}

<div id="bkgdiv"></div>
<div id="bkgdivfixed"></div>
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>

Answer 2

如果你想给身体提供背景，那就是非常简单的任务。

最初你需要为body和html编写css

html, body {
  margin: 0;
  height: 100%;
}

下一个是你需要给身体提供背景css

body {
  background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

现在，图像似乎是身体的中心（屏幕），现在，您可以使用background-size属性调整大小。

background-size: cover;

图像放大到足以覆盖整个屏幕。

background-size: contain;

图像放大到屏幕的高度或宽度（更小）。

你可以给我一个固定大小的给定尺寸

background-size: Xpx Ypx;

“background-positon：center”不适用于“background-attachement：scroll”

2 个答案: