CSS - 重复背景图像应该是完全可见的

Question

是否有可能通过CSS 强制 background-image重复它应该是完全可见的（不是在容器的末尾剪切）？ 容器高度非常灵活！

它看起来应该在右侧但是我得到的结果就像左侧的内容一样 增长。

有两种可能的方式：

1. 避免background-image溢出（我无法使用background-size: contain，因为它会重复）
2. 强制容器逐渐生长

这可能吗？

Answer 1

这不是最好的解决方案，但也许会有所帮助：如果你可以忽略IE8及以下版本，你可以使用background-size属性，它可以让你用百分比调整图像的大小，这样它们就可以了完全符合你的需要（并且会在调整大小时保持相同的位置），然后你可以使用background-position属性并稍微移动图像以获得更好的结果。然后，当你试图调整大小时，你会看到它在屏幕上保持相同的比例，但由于百分比，图像越来越大，所以一定要从头开始上传更大的图像，这样当图像变大时不会调整大小超过实际图像大小。

示例：http://jsfiddle.net/fq5dkL51/2/