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％的图片拟合（这是我想要的）？

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

由于

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

Kudos Arleigh Hix指出我正确的方向。

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

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

2 个答案: