html - 背景封面最小尺寸和居中

Question

我正在尝试为元素添加背景，但是图像非常大。因此，使用 background: cover 会使图像保持实际大小并且不会居中。因此，图像看起来非常“放大”，因为它没有尽可能多地显示。

那么，问题来了:如何让图像尽可能小，同时仍然覆盖整个元素。此外，我怎样才能正确居中？

附上我有什么背景:封面给我，以及我想要的一个简单的 photoshop 模型。我用红色勾勒出背景的边界。

背景:小宽度覆盖

小宽度的 Photoshop 模型

背景:大宽度覆盖

大宽度的 Photoshop 模型

Answer 1

目前，#home 的 background-position 声明设置为 0, 0;

这些数字代表背景图像的 x 轴(水平放置)和 y 轴(垂直放置)。我和检查员一起玩，能够根据自己的喜好移动背景图像的位置。如果关键字对您更有意义，您也可以尝试使用它们

    background-position: top left;

或者也许:

    background-position: center center;

百分比也是一种选择:

    background-position: 25% 50%;

关键字和百分比也分别适用于 x 轴和 y 轴。

查看 MDN 文章了解更多信息: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

最后一点，您的背景图片巨大——准确地说是 7.1MB。如果您可以将它的大小减小到至少 1MB(尽管 500kb 以下是最理想的)，我完全推荐这样做。