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中设置的百分比指定图像的哪个点应与元素中的相同点匹配。

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

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>

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

将伪设置为200％宽度，背景大小设置为50％，背景重复设置为重复，它将使可见部分等于原始图像的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％（水平方向）或向下（垂直方向）对齐元素的填充框。 / p>

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

选择您在元素之间或之下定义的百分比。
选择您在图片之间或之下定义的百分比。
图像相对于拾取的点移动到元素上拾取的点。

让我们举例说明你想要在一个元素中定位背景图像的任意情况。存在两种广泛的情况：

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

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

然而，在后一种情况下，距离图像边缘的点X％与距离元素边缘的点X％之间的距离总是不同，因此可以进行移动。 / p>

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

5 个答案: