CSS 循环背景图像的方式，包括封面或包含尺寸

Question

假设您正在尝试为这样的可平铺背景制作动画:

.container {
  width: 160px;
  height: 91px;
}
.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: contain;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
@-webkit-keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}
@keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}

<div class="container">
  <textarea class="bg"></textarea>
</div>

一旦您更改容器的尺寸，循环动画就会中断!

有什么办法可以不用 JS 来实现响应式吗？

Answer 1

问题是，要使其具有响应性，您需要使用百分比设置动画背景位置。

但是，当您将 background-size 设置为 cover 或 contain 时，在某些情况下宽度会调整为 100%。在这种情况下，使用百分比的背景位置是无用的(不会移动它)。

我发现管理这个的唯一方法是将图像移动到一个伪元素，然后移动它。不过，为了保持连续性，我们需要两个伪元素。

但这不适用于文本区域。

你没有说 textarea 是一个要求，所以我发布这个。要显示它适用于调整大小，请将其悬停。

.container {
  width: 160px;
  height: 100px;
  position: relative;
  border: solid 1px black;
  display: inline-block;
}
.container:nth-child(2) {
   width: 220px;  
}
.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg:before, .bg:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://i.stack.imgur.com/wBHey.png);
    background-size: 100%;
    animation: move 2s infinite linear;
}

.bg:before {
    right: 100%;
}

@keyframes move {
    from {transform: translateX(  0%);}
      to {transform: translateX(100%);}
}

<div class="container">
  <div class="bg"></div>
</div>
<div class="container">
  <div class="bg"></div>
</div>