屏幕上的响应式背景图像问题 <= 768px

Question

我在使背景图像响应时遇到问题，特别是在宽度为 768 像素或更小的屏幕上。当我将屏幕调整到更小的宽度时，背景图像似乎被裁剪得越来越多。

body {
  background-image: url('./img/moods.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

我尝试过使用背景大小：封面；属性以确保背景图像覆盖整个视口，但问题仍然存在。我查看了各种示例和教程，其中大多数都建议采用相同的方法。

我尝试过的： 我尝试了不同的背景大小值，并尝试使用媒体查询来解决问题，但我的尝试都没有提供令人满意的解决方案。

Answer 1

要使背景图像具有响应性并防止其在较小的屏幕上被裁剪，您可以使用

background-position

属性。通过将其设置为

center

，背景图像将位于屏幕中央，并且不会随着屏幕尺寸的减小而被裁剪。这是更新的 CSS 片段：

CSS

body {
  background-image: url('./img/moods.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

这应该有助于保持背景图像的纵横比，并确保其在宽度为 768 像素或更小的屏幕上完全可见。