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

是否有可能通过CSS迫使background-image其重复，它应该是完全可见（在容器的端部不切断）？容器高度灵活！CSS - 重复背景图像应该是完全可见

enter image description here

它应该看起来像右侧，但我得到像左侧的结果，如果内容增长。

有两种可能的方式：

避免background-image溢出（因为它是重复的，我不能使用background-size: contain）
力容器增长逐渐

这是可能？

来源

2014-12-05 Luca Nate Mahler

请问您是否可以详细说明左侧有什么问题需要修复？你只是在谈论黑色酒吧？ – Paul 2014-12-05 10:58:27

底部的行被切掉了 – Turnip 2014-12-05 10:59:02

这不是最好的解决方案，但可能会有所帮助：如果您可以忽略IE8及其以下版本，则可以使用background-size属性，它将允许您用百分比调整图像的大小，以便它们完全达到你需要（并且将保持在调整大小的同一位置），那么你可以使用background-position属性并将图像稍微移动一点以获得更好的结果。那么当你尝试调整它的大小时，你会发现它在屏幕上的比例保持不变，但由于百分比，图像变得更大，因此请确保从头开始上传更大的图像，以便图像变大时将不会调整大于实际图像大小。

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

来源

2014-12-05 11:29:27

我们接近解决方案，但问题是背景图像的大小应该被修正。想象一下，如果内容增长很多，子弹将会非常大。 – 2014-12-05 13:21:40

您能否请您举一个问题的实例？ – 2014-12-06 21:02:18

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

回答

相关问题