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

我可以通过将背景放大两倍来实现它。

我知道这不是完美的解决方案，但也许您可以对图像大小或其他方式做一些小技巧，使其看起来像您想要的那样。

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

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

Answer 2

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

但是，当您将 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>

Answer 3

您遇到的问题是 height 调整大小和不同的设置。为了让它与您的实际设置一起工作，位移必须是图像 height 的 2 倍（因为图像的比例为 2:1）。我不认为你只能通过 css 来做。

但你有不同的选择。我不确定您要保留显示的确切部分，所以这里有三种方法可以让您的翻译在 resize 上正常工作。 None 完全符合您的设置，因为您的设置很难（不可能？）设置正确的位移。由于您根据高度拉伸宽度，因此很难理解。通过 JS 会很容易，但是 css 对这些值的访问权限有限。

建议的解决方案保持高度不变，这样您就可以保持位移值不变。

第一个，背景大小是以像素为单位的容器大小。

第二种解决方案，您仅在 x 轴上调整文本区域的大小。

第三次在 y 轴上重复并保持高度和宽度固定。

可能还有其他更适合您特定需求的解决方法。

.container {
  width: 160px;
  height: 80px;
   margin: 10px;
}

.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: 160px 80px;
     padding: 0px;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
.bg2 {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: contain;
     padding: 0px;
    resize: horizontal;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
.bg3 {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat left center;
  background-size: 160px 80px;
     padding: 0px;
  -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>
<div class="container">
  <textarea class="bg2"></textarea>
</div>
<div class="container">
  <textarea class="bg3"></textarea>
</div>

Answer 4

这与 Ilpo 的回答类似，只是它不调整图像大小 (background-size: auto;)。无论容器大小如何，动画始终流畅。

缺点是需要事先知道图片的宽度(200px)。

既然你说的是可平铺的，而且这张图片看起来在两个方向上都是可平铺的，我也让它在两个维度上重复。结果，您的 textarea 充满了平铺的背景图像，动画水平滚动。如果您只想在一个方向上平铺，您可以将 repeat 更改回 repeat-x 并将垂直位置从 top 更改为您需要的任何位置。

.container {width: 160px;height: 91px;}

.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat left top;
  background-size: auto;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}

@-webkit-keyframes displace {
  from { background-position: 0px top; }
  to   { background-position: 200px top; }
}

@keyframes displace {
  from { background-position: 0px top; }
  to   { background-position: 200px top; }
}

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

Answer 5

For each background-position: 200px bottom; you need to add 1second for example if you want add 2S, you add another 200px so you make it background-position: 400px bottom; I think.

代码如下：

.container {
  width: 160px;
  height: 91px;
}

.bg {
 width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) fixed;
  -webkit-animation: displace 1s linear infinite;
  animation: displace 1s linear infinite;
}

@-webkit-keyframes displace {
  from { background-position: 0 bottom; }
  to { background-position: 200px bottom; }
}

@keyframes displace {
  from { background-position: 0 bottom; }
  to { background-position: 200px bottom;}
}

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

希望对你有用，如有任何问题，请告诉我。

Answer 6

.container {
  border: 1px solid black;
  display: inline-block;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
  background-size: 160px 100%;
}

.bg {
  float: left;
  border: 0;
  margin: 10px;
  width: 160px;
  height: 91px;
  background-color: rgba(255, 255, 255, .5);
}

@-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>

CSS 使用封面或包含尺寸来循环背景图像的方式

CSS way of looping a background image with cover or contain sizing

css

css-animations

responsive-design