为什么我的 CSS 滚动动画在 background-size 设置为 100% 时不起作用？

Question

我正在尝试实现无限滚动重复背景图像的 CSS 动画。为了使滚动尽可能平滑，我希望动画在图像处于与开始时完全相同的位置时循环。为了让动画看起来不错，无论任何特定用户的视口大小如何，我都将使用 SVG 图形，并且我希望将 background-size 属性设置为 100% 或 cover 关键字。

我指定的参数没有按预期工作。但是，我选择的任何其他 background-size 值都可以。

为什么当background-size 是100% 时我的滚动动画不起作用？

有关工作示例，请参阅this code pen 或使用以下代码：

HTML

<div id="element">
  <h1>Scroll endlessly I say!</h1>
</div>

CSS

@keyframes scroll {
  0%   { background-position:   0% center; }
  100% { background-position: 100% center; }
}

#element{
  padding:     10px;
  color:       white;
  background:  black;
  text-shadow: 0 0 4px black;

  animation:         scroll 8s linear infinite;
  background-image:  url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg");
  background-repeat: repeat;

  /* Works: 
  ========================= */
  background-size:  50%;
  /*background-size:  20%;*/
  /*background-size:  200%;*/
  /*background-size:  100px;*/
  /*background-size:  10rem;*/

  /* Does NOT work:
  ========================= */
  /*background-size:  100%;*/
}

虽然我可以使用像 this one by CSS-Tricks 这样的其他解决方案，但我更喜欢我的解决方案，因为它更有效，因为我没有使用大型冗余图形。

Answer 1

根据 w3c spec:

'背景位置'

百分比

百分比 X 将横过（水平）或向下（竖直）图像的点 X% 与横过（水平）或向下（竖直）元素的填充框的点 X% 对齐。例如，使用值对 '0% 0%'，图像的左上角与填充框的左上角对齐。 '100% 100%' 的值对将图像的右下角放置在填充框的右下角。对于“14% 84%”的值对，图像横向 14% 和向下 84% 的点将放置在填充框横向 14% 和向下 84% 的点处。

这意味着您在 background-position 中设置的百分比指定图像的哪个点应该与元素中的同一点匹配。

BUT当容器和图片的大小相等时，图片的所有点都匹配容器的点，任意百分比在背景位置具有相同的结果（即适合容器的图像，居中）。所以，那么背景就不会动了！

Answer 2

如果您观看动画，图像会根据图像的右边缘 (svg) 从起点 (background-size) 滚动到 100%，或者直到图像的右边缘到达图像的右边缘容器。然后动画重复。

如果动画的开始点是 100%（或cover），则您将图像的右边缘放置在容器的右边缘。所以，动画显然是不存在的。基本上，图像在同一位置重复。

根据您使用的图像，这有点难以看到。但是如果你使用左右边缘清晰的图像，你会更容易看到：

http://codepen.io/anon/pen/wMpYjN?editors=110

注意图像的右边缘。

Answer 3

它似乎无法使用百分比（vals 回答得很好），我还不能说出原因。

如果更改为像素，它确实有效，正如您在此示例中看到的那样，因此结合媒体查询，无论如何都可以“填充”宽度。

@keyframes scroll {
  0%   { background-position: 0px center; }
  100% { background-position: 600px center; }
}

#element{
  width: 600px;
  padding:     10px;
  color:       white;
  text-shadow: 0 0 4px black;  
  animation: scroll 8s linear infinite;
  background: black  url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg") left center repeat; 
  background-size:  600px;
}

<div id="element">
  <h1>Scroll endlessly I say!</h1>
</div>

作为一种解决方法，它可以完全按照百分比对原始设置的作用，您可以使用伪元素。

将pseudo设置为200%宽度，背景尺寸设置为50%，背景repeat重复，它将使可见部分等于原始图像的100%，然后对其左侧值进行动画处理。

（恕我直言，它会比 CSS-Tricks 的更好，高效且不需要大型冗余图形）

@keyframes scroll {
  0%   { left: -100%; }
  100% { left: 0%; }
}

#element{
  position: relative;
  padding:     10px;
  color:       white;
  background:  black;
  text-shadow: 0 0 4px black;  
  overflow: hidden;
}
#element:before {
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 200%;
  animation:         scroll 8s linear infinite;
  background-image:  url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg");
  background-position: left center; 
  background-repeat: repeat; 
  background-size:  50%;
  z-index: 1;
}
h1 {
  position: relative;
  z-index: 2;
}

<div id="element">
  <h1>Scroll endlessly I say!</h1>
</div>

Answer 4

当背景大小为 100% 时，您的动画将无法工作，因为 background-repeat: repeat; 属性会导致您的图像自我重复，因为您的图像大小为 100% 图像实际上会自我重复，我们只是看不到它.如果您将背景大小设置为 98%，您可以检查它。

Answer 5

因为您正试图根据位于同一位置的 2 个点之间的距离重新定位背景图像。

来自the specification：

百分比 X 将横过（水平）或向下（竖直）图像的点 X% 与横过（水平）或向下（竖直）元素的填充框的点 X% 对齐。

这意味着要决定放置背景图像的位置：

1. 您在元素上方或下方定义的百分比被选中。
2. 您在图像上方或下方定义的百分比被选中。
3. 图像相对于在其上选取的点移动到在元素上选取的点。

让我们以任意情况为例，您希望在元素内放置背景图像。存在两种广泛的情况：

• 图像和元素大小相同，或者
• 图像和元素的大小不同。

在前一种情况下，您选择的百分比无关紧要。 that 点与图像边缘之间的距离将与 that 点与元素边缘之间的距离完全相同，因为它们都是相同大小（Y 的 X% 是 Y 的 X%）。这意味着无法进行明显的重新定位，因为将图像移动到它已经存在的位置就像根本不移动它一样。

然而，在后一种情况下，点 X% 与图像边缘之间的距离将始终不同于点 X% 与元素边缘之间的距离，因此可以进行移动。