为何设置body的background-position为center会使背景图片上移？

带居中背景图片的示例代码：

CSS #

/*backgrounds and colors*/

body {
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

HTML #

<!DOCTYPE html>
<html>

<body>
</body>

</html>

未设置居中背景图片的示例代码：

CSS #

/*backgrounds and colors*/

body {
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: no-repeat;
}

HTML #

<!DOCTYPE html>
<html>

<body>
</body>

</html>

问题：为何设置body的background-position为center后，背景图片会向上移动？ #

这是默认定位规则和background-size: cover的裁剪逻辑共同作用的结果：

• 默认定位的表现：不设置background-position时，浏览器默认采用left top（左上角对齐）。因为body没有内容，高度为0，浏览器会自动把body的背景应用到占满视口的html元素上。此时配合cover属性，图片会被缩放至刚好覆盖视口，图片左上角和视口左上角对齐，超出视口的部分只会从右侧和底部被裁剪。

• center定位的表现：设置center后，图片的中心点会和视口的中心点对齐。同样用cover缩放时，图片会以中心为基准铺满视口，超出的部分会从上下左右同时裁剪。如果你的图片宽高比大于视口宽高比，垂直方向上图片的上下部分会被裁掉一部分，对比默认的顶部对齐，原本显示的图片下部会被裁掉更多，上部的显示区域相对上移，视觉上就会觉得图片“向上移动”了。

简单来说，两种定位方式决定了图片裁剪的区域不同，center定位让图片的中心和视口中心重合，改变了原本从顶部开始的显示范围，所以看起来像是图片上移了。

内容的提问来源于stack exchange，提问作者Joel Castro