当 div 溢出时滚动背景图像和内容答案

【问题标题】：Scroll background-image with content when div overflows当 div 溢出时滚动背景图像和内容
【发布时间】：2011-04-27 12:52:43
【问题描述】：

我有一个带有溢出的容器 div:scroll;。它包含一个平铺的背景 div（宽度：100%；高度：100%；），顶部有很多可拖动的 div。

当可拖动的 div 使容器 div 溢出时，如何让平铺背景也覆盖溢出？

谢谢！

【问题讨论】：

为什么要为背景图片使用额外的 div？你可以通过css背景属性将图像应用到容器div，不是吗？
如果我理解正确，背景图像没有额外的 div。有几个可以拖动的 div 放置在单个容器 div 中。容器 div 有背景，溢出设置为滚动。问题是当可拖动的 div 移动到容器 div 之外时。背景不展开，背景为空白。我认为不可能将背景扩展到超出它已添加到的 div 的限制。一个链接会很好，所以我们可以看到问题。

标签： css background overflow

【解决方案1】：

正如@schellmax 在 cmets 中建议的那样，显而易见的解决方案似乎是将背景图像应用于容器 div，而不是其中的另一个 div。那将是最优雅的解决方案。

如果这是不可能的，例如当您想在容器 div 的背景上使用透明的重复背景图像时，那么您可以尝试不在内部 div 上指定特定宽度（width: auto 或 @987654324 @)。然后，对于高度，您可以尝试height: inherit。如果这不起作用（我还没有测试过），也许是一个 javascript 解决方案——尽管如此，我还是更愿意按照我在第一段中所说的去做。

【讨论】：

感谢您的回复。如果我将背景应用于容器，那么它不会随内容滚动（无论如何在 webkit 中）。如果我使用自动或继承，那么背景就会消失。 JavaScript 是唯一的解决方案吗？好像我错过了一些简单的东西。
哦，我明白了。我怀疑那时是否会有 CSS 解决方案。最好的选择是 JavaScript 解决方案，当容器的内部宽度发生变化时，它会设置内部元素的宽度和高度。
tizag.com/cssT/background.php 有一个例子，大约在页面的一半。当您滚动整个页面时滚动背景有效，但当您在文本框中滚动时无效，这正是我想要的。