使用封面或包含大小循环背景图像的 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 或 contains 时，在某些情况下，宽度会调整为 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 2

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

Answer 3

对于每个background-position: 200px bottom;，您需要添加1second，例如，如果您想添加 2S，则添加另外 200px，这样您 让它background-position: 400px bottom;我想。

代码如下：

.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 4

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

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

既然你说的是可平铺的，而且这张图片看起来在两个方向上都是可平铺的，所以我也让它在两个维度上重复。结果，您的textarea 被平铺的背景图像填充，动画以水平滚动。如果您只想平铺 1 个方向，可以将 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

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

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

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

第一个，background-size 是容器的大小，单位为 px。

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

第三次你在 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 6

我能够通过将背景放大两倍来使其工作。

我知道这不是完美的解决方案，但也许你可以对图像大小或其他东西做一个小技巧，让它看起来像你想要的那样。

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