CSS使用封面或包含大小循环背景图像的方法

假设您正在尝试设置可平铺背景的动画，如下所示：

.container{
宽度：160px；
高度：91px；
}
.bg{
宽度：100%；
身高：100%；
背景：url(http://i60.tinypic.com/2j2fhjm.jpg)重复-x左中心；
背景尺寸：包含；
-webkit动画：置换2s线性无限；
动画：置换2s线性无限；
}
@-webkit关键帧置换{
从{
背景位置：0中心；
}
到{
背景位置：160px中心；
}
}
@关键帧置换{
从{
背景位置：0中心；
}
到{
背景位置：160px中心；
}
}

---

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

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

.container{宽度：160px；高度：91px；}
.bg{
宽度：100%；
身高：100%；
背景：url(http://i60.tinypic.com/2j2fhjm.jpg)重复-x左中心；
背景大小：200%；
-webkit动画：置换2s线性无限；
动画：置换2s线性无限；
}
@-webkit关键帧置换{
从{背景位置：左中心；
}到{背景位置：200%中心；}
}
@关键帧置换{
从{背景位置：左中心；
}到{背景位置：200%中心；}
}

---

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

但是，当您将“背景大小”设置为“封面”或“包含”时，在某些情况下，宽度会调整为100%。在这种情况下，使用百分比的背景位置是无用的（不会移动它）

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

但这在文本区是行不通的

你没有说textarea是一个要求，所以我发布了这个。若要显示它在调整大小时起作用，请将其悬停

.container{
宽度：160px；
高度：100px；
位置：相对位置；
边框：实心1px黑色；
显示：内联块；
}
.容器：第n个子容器（2）{
宽度：220px；
}
.bg{
位置：绝对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.bg:之前，.bg:之后{
内容：“；
位置：绝对位置；
宽度：100%；
身高：100%；
背景图片：url(http://i.stack.imgur.com/wBHey.png);
背景大小：100%；
动画：移动2s无限线性；
}
bg：以前{
右：100%；
}
@关键帧移动{
来自{transform:translateX（0%）；}
到{转换：translateX（100%）；}
}

---

您遇到的问题是高度的调整和不同的设置。要使其与实际设置配合使用，置换必须是图像高度的2倍（因为图像的比例为2:1）。我不认为你只能通过

css

但你有不同的选择。我不确定你到底想保留显示的哪一部分，所以这里有三种方法可以让你的翻译工作在

调整大小

上。没有一个完全符合您的设置，因为您的设置使得很难（不可能？）设置正确的位移。由于您根据高度拉伸宽度，因此很难理解。通过JS很容易，但是css对这些值的访问有限

建议的解决方案保持高度恒定，因此可以保持置换值恒定

首先，背景大小是容器的大小（以px为单位）

第二种解决方案是，只在x轴上调整textarea的大小

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

可能还有其他更适合您特定需求的变通方法

.container{
宽度：160px；
高度：80px；
利润率：10px；
}
.bg{
宽度：100%；
身高：100%；
背景：url(http://i60.tinypic.com/2j2fhjm.jpg)重复-x左中心；
背景尺寸：160px 80px；
填充：0px；
-webkit动画：置换2s线性无限；
动画：置换2s线性无限；
}
.bg2{
宽度：100%；
身高：100%；
背景：url(http://i60.tinypic.com/2j2fhjm.jpg)重复-x左中心；
背景尺寸：包含；
填充：0px；
调整大小：水平；
-webkit动画：置换2s线性无限；
动画：置换2s线性无限；
}
.bg3{
宽度：100%；
身高：100%；
背景：url(http://i60.tinypic.com/2j2fhjm.jpg)重复左中；
背景尺寸：160px 80px；
填充：0px；
-webkit动画：置换2s线性无限；
动画：置换2s线性无限；
}
@-webkit关键帧置换{
从{
背景位置：0中心；
}
到{
背景位置：160px中心；
}
}
@-关键帧置换{
从{
背景位置：0中心；
}
到{
背景位置：160px中心；
}
}

---

这与Ilpo的答案类似，只是它不会调整图像大小（

背景大小：自动；

）。无论容器大小如何，整个动画都是平滑的

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

既然你说的是可平铺的，而且这个图像看起来可以在两个方向上平铺，我也让它在两个维度上重复。因此，您的

文本区域将填充平铺背景图像，并设置水平滚动动画。如果只想在1个方向平铺，可以将
repeat
更改回
repeat-x
，并将垂直位置从
顶部更改为所需的任何位置


.container{宽度：160px；高度：91px；}
.bg{
宽度：100%；
身高：100%；
背景：url(http://i60.tinypic.com/2j2fhjm.jpg)雷佩亚