为什么“背景附件：本地”时背景图像偏移约 25%？

Question

谁能帮我理解为什么这个CSS：

<style type="text/css">
    html {
      background: url(images/img.diary.1280.jpg) no-repeat center center local; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    body {
      font-family: 'alpha geometrique', fantasy, cursive, sans-serif;
      background: none;
    }...

会使背景图像“向上移动”约 25%，以便仅显示底部约 75% 的图片，与此替代的“背景：”行相比？

background: url(images/img.diary.1280.jpg) no-repeat center center fixed;

显示 100% 的图片适合视口（这是我想要的）？

我也尝试过“滚动”，但这与“本地”的效果相同。我不想使用 fixed 的原因是，当我滚动窗口时，元素（引导程序 4）滚动，但背景图像并没有使它看起来像元素在顶部滑动。 我更喜欢元素和图像一起滚动，这是我想要实现的真正目标。

谢谢

Answer 1

它与background-size: cover 和图像的纵横比有关。封面将增加图像的大小，直到它覆盖宽度和高度，所以如果图像是纵向的并且窗口是横向的，它将增加图像的大小（保持纵横比）直到它与窗口一样宽，这使得它更高比窗口，并且由于您将其垂直居中，因此顶部和底部将不可见。试试这个：

  html {
    background: url(images/img.diary.1280.jpg) no-repeat center center local; 
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
  }

包含就像最佳匹配，它将图像的大小增加（或减少）到可以容纳在窗口内的最大大小。

Answer 2

感谢 Arleigh Hix 为我指明了正确的方向。

我需要将background-position: center center 更改为background-position: center top，同时保留background-attachment: local。现在我拥有了我想要的两种行为。