当背景大小设置为100%时，为什么我的CSS滚动动画不工作？

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

我指定的参数无法按预期工作。但是，我选择的任何其他背景大小值都可以

为什么我的滚动动画在背景大小为100%时不起作用

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

HTML

---

虽然我可以使用另一种解决方案，比如，我更喜欢我的解决方案，因为它效率更高，因为我没有使用过大的冗余图形。

如果您观看动画，图像会根据图像SVG的右边缘滚动，从起始点背景大小到100%，或者直到图像的右边缘到达容器的右边缘。然后动画重复

如果动画的起点为100%或覆盖，则将图像的右边缘放置在容器的右边缘。因此，动画显然是不存在的。基本上，图像在同一位置重复

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

---

观看图像的右边缘。

如果观看动画，图像将根据图像SVG的右边缘滚动，从起始点背景大小滚动到100%，或者直到图像的右边缘到达容器的右边缘。然后动画重复

如果动画的起点为100%或覆盖，则将图像的右边缘放置在容器的右边缘。因此，动画显然是不存在的。基本上，图像在同一位置重复

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

---

观看图像的右边缘。

当背景大小为100%时，由于背景重复：重复；属性，该属性会导致您的图像自身重复，因为您的图像大小是100%图像实际上是自己重复的，所以我们无法看到它。如果您将背景大小设置为98%，则可以进行检查

由于背景重复：重复，当背景大小为100%时，动画将无法工作；属性，该属性会导致您的图像自身重复，因为您的图像大小是100%图像实际上是自己重复的，所以我们无法看到它。如果您将背景大小设置为98%，则可以进行检查

用百分比来回答这个问题似乎是行不通的，我还说不出原因

如果要更改为像素，它确实可以工作，正如您在本示例中所看到的，因此结合媒体查询，您可能仍然能够填充宽度

@关键帧滚动{ 0%{背景位置：0px中心；} 100%{背景位置：600px中心；} } 元素{ 宽度：600px； 填充：10px； 颜色：白色； 文本阴影：0 0 4px黑色； 动画：滚动8s线性无限； 背景：黑色urlhttps://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg 左中重复； 背景尺寸：600px； } 我说没完没了地滚动！ 用百分比来回答这个问题似乎是行不通的，我也说不出原因

如果要更改为像素，它确实可以工作，正如您在本示例中所看到的，因此结合媒体查询，您可能仍然能够填充宽度

@关键帧滚动{ 0%{背景位置：0px中心；} 100%{背景位置：600px中心；} } 元素{ 宽度：600px； 填充：10px； 颜色：白色； 文本阴影：0 0 4px黑色； 动画：滚动8s线性无限； 背景：黑色urlhttps://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg 左中重复； 背景尺寸：600px； } 我说没完没了地滚动！ 根据w3c：

“背景位置”

百分比

百分比X将图像的横向X%点或垂直向下X%点与元素填充框的横向X%点或垂直向下X%点对齐。例如，如果值对为“0%0%”，则图像的左上角与填充框的左上角对齐。“100%100%”的值对将图像的右下角放置在填充框的右下角。如果值对为“14%84%”，则图像上下14%的点将放置在填充框上下14%的点上

这意味着 在背景位置设置的百分比指定图像的哪个点应与元素中的同一点匹配

但当容器和图像的大小相等时，图像的所有点都与容器的点匹配，背景位置的任何百分比都具有相同的结果，即图像适合容器，居中。那么，背景就不会移动了

根据w3c：

“背景位置”

百分比

百分比X将图像的横向X%点或垂直向下X%点与元素填充框的横向X%点或垂直向下X%点对齐。例如，如果值对为“0%0%”，则图像的左上角与填充框的左上角对齐。“100%100%”的值对将图像的右下角放置在填充框的右下角。如果值对为“14%84%”，则图像上下14%的点将放置在填充框上下14%的点上

这意味着您在背景位置设置的百分比指定图像的哪个点应与元素中的相同点匹配

---

但当容器和图像的大小相等时，图像的所有点都与容器的点匹配，背景位置的任何百分比都具有相同的结果，即图像适合容器，居中。那么，背景就不会移动了

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

发件人：

百分比X将图像的横向X%点或垂直向下X%点与元素填充框的横向X%点或垂直向下X%点对齐

这意味着要确定背景图像的位置，请执行以下操作：

将拾取一个点，该点为在元素上或元素下定义的百分比。 将拾取一个点，即在图像上或图像下定义的百分比。 图像将相对于在其上拾取的点移动到在元素上拾取的点。 让我们以一个任意的情况为例，您希望将背景图像放置在元素内部。存在两种广泛的情况：

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

---

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

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

发件人：

百分比X将图像的横向X%点或垂直向下X%点与元素填充框的横向X%点或垂直向下X%点对齐

这意味着要确定背景图像的位置，请执行以下操作：

将拾取一个点，该点为在元素上或元素下定义的百分比。 将拾取一个点，即在图像上或图像下定义的百分比。 图像将相对于在其上拾取的点移动到在元素上拾取的点。 让我们以一个任意的情况为例，您希望将背景图像放置在元素内部。存在两种广泛的情况：

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

---

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

这真的很奇怪。。然而，你可以只使用50%，它将是响应无论如何，这真的很奇怪。。然而，你可以只去50%，它将是响应任何方式你是对的！但我认为有一个更好的解释。你是对的！但我认为有一个更好的解释。我可以问一下，为什么你会发布一个答案，这个答案几乎是一个复制品，虽然略高于wri

---

tten？LGSon，我起草了很长一段时间的回复，没有注意到@vals。无论如何，我更喜欢VAL。我可以问一下，为什么你发布的答案几乎是一个副本，虽然稍微有点写出来了？LGSon，我起草了一段相当长的时间，没有注意到@VAL。无论如何，我更喜欢VAL。

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

@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%;*/
}