为什么将背景大小设置为100％时CSS滚动动画不起作用？

JacksonHunt 发表于 Dev

杰克逊·亨特

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

我指定的参数无法正常工作。但是，background-size我选择的任何其他值都可以。

为什么当我滚动动画不能正常工作background-size是100%？

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

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

尽管我可以使用CSS-Tricks的另一种解决方案，但我更喜欢我的解决方案，因为它效率更高，因为我没有使用大型的冗余图形。

错误的

根据w3c规范：

“背景位置”

百分比

百分比X将元素的填充框横穿（水平）或向下（垂直）的X％点与横穿（水平）或向下（垂直）的X％点对齐。例如，使用值对“ 0％0％”，图像的左上角与填充框的左上角对齐。值对“ 100％100％”将图像的右下角放在填充框的右下角。当值对为“ 14％84％”时，图像的14％跨度和84％向下的点将被放置在填充框的14％跨度和84％的点下方。

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。