Question

我有一个带溢出自动的绝对定位DIV。当我向下滚动时，背景显然看起来固定，即使我网站上的所有内容的默认值都是滚动。当我尝试在DIV上定义背景的两种方式时，它仍然有这种行为：

background-attachment: scroll; background: url() repeat top center scroll #000

极度失落。认为这可能是因为它绝对定位DIV，但即使我解除了它，它仍然失败了。 FF，Safari，Chrome和IE中存在问题。

更新：这是我尝试的最新代码..在实际网站上，CSS位于我指向头标记的文件中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <style type="text/css">
        .template-body {
          background-attachment:scroll;
          background-color:#151515;
          background-image:url("http://www.fake.com/images/2183ba03681e577511e6589e554b7a86.jpg");
          background-position:center top;
          background-repeat:repeat;
        }
        </style>
        <div class="template-body" style="position: absolute; margin: 0px; left: 332px; right: 0px; top: 93px; bottom: 0px; width: 1094px; z-index: 1; visibility: visible; display: block; background-color: rgb(21, 21, 21); height: 696px;">

          <div>
            Here lies all the content that makes .template-body scroll
          </div>

        </div>
    </body>
    </html>

尝试在内部/内容DIV上设置萤火虫的高度并没有任何帮助。

Answer 1

div的背景仍然是固定的，因为div不会以任何方式移动。它只是滚动的div的内容。

将背景图像放在div的内容上。如果需要，您可以将内容包装在另一个div中。

编辑：

将背景图像放在内部div上，使其跟随滚动的内容。要使背景填充外部div，即使内容较小，也要在外部div上添加相同的背景。

Example

Answer 2

试试这个： http://jsfiddle.net/mnnue/

（基本上是Guffa所说的）

我在模板div中添加了.bg-image div，并使用z-index将其定位在内容下方。我使宽度更薄，以便更好地滚动。

<击> 链接会有所帮助。我解释为你的代码在这里： http://jsfiddle.net/SebastianPataneMasuelli/pvaEM/4/

<击>

~~，bg图像正在滚动。你可以在那个小提琴上重现这个问题吗？~~

为什么背景附件：滚动不起作用？

2 个答案:

编辑：