Html 以每侧具有可展开背景图像的div为中心

有没有一种方法可以让两个不同的背景图像，一个附着在div元素的每一侧，当窗口的大小变小时，它们不会坚持静态显示？换句话说，如果div元素的宽度为900px，并在小型笔记本电脑上查看，它将保持居中，但只有足够的左右背景根据视口大小显示

---

在这一点上，我想我已经用尽了我有限的CSS知识。

我想你必须重新考虑这个问题。只能有一个背景。但是，如果需要，您仍然可以通过在居中的Div两侧使用背景不同的相同尺寸的Div来提供相同的效果，方法是将一个向右浮动，另一个向左浮动。你可能想考虑一下<强> jQuery手风琴竖手风琴，以给出这样的效果。

O！美丽设计的圣杯/现在可以在一些神秘的线条中找到吗？/我们只要求你再试一次，考虑一个，背景，两个。嗯，这很可爱，但它不回答我的问题。无论如何，谢谢你如果你不喜欢CSS3，这个问题是免费的。是的，我知道CSS3下有双重/三重/四重背景，但这不是问题所在。问题是如何设计CSS，使背景保持与居中的div相连，即使视口已缩小到几乎与div相同的宽度。我试图避免使用javascript，假设仅使用CSS就可以解决问题。我已经尝试了您建议的几种方法，但问题是，要么额外的div（及其背景）没有附加到主div。更糟糕的是，三个div加在一起的总像素宽度高达1540，这是调整浏览器窗口大小时的最小尺寸。我真的希望，随着视口的减少，只有主div在窗口中保持居中。关于如何做到这一点有什么建议吗？在这种情况下，使用SVG是一个很好的选择。您可以使用Adobe Illustrator创建SVG，该SVG位于居中Div下方，使用HTML5的动画转换可以获得特定效果。要了解更多，请用谷歌搜索。还有一篇文章[SVG剪辑背景]，我现在非常简单地解决了这个问题：我按照你的建议又创建了两个div，但我将它们嵌套在相对定位的主div中。另外两个div大小相同，但这并不重要。我没有将这两个背景作为独立图像插入到那些div中，而是在CSS中将它们设置为真实背景。最后，我没有像你建议的那样将div左右浮动，而是将它们绝对地定位，在左侧使用负值，在右侧使用正值，这样它们就会显示为与中心div相连。Presto！。。。我应该补充一点，我所期待的调整窗口大小的行为是完美的。我会在将来的项目中记住这一点。如果只是为了视觉目的，我建议查看：：before和：：after。这将防止添加不必要的标记。