css - 如何修复div中的背景图像

Question

我发现了一个相当奇怪的问题，我想我知道如何解释；我只是不知道如何解决它!

我有一个包含标题、“页面内容”和页脚的 div#container(最小高度为 100%(IE 的高度)的 div)的页面。 div#container 的背景图片应该是固定的(不是固定位置而是 background-attachment: fixed，这使得图片在您滚动时跟随)。

问题是，当在 CSS 中将固定附件添加到 background-tag 时，背景图片现在位于 div 之外。

CSS 如下:(没有 background-attachment: fixed; )

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

margin:0 auto;是使 div 和 !important 居中第一件事height:是让 IE 忽略那个特定的高度标签。如果min-height: 100%，这是必需的应该可以。

当我添加这个...

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-attachment: fixed; //This is what is added to the code-sample
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

...背景图片移出 div。让我解释一下:背景图像唯一可见的部分是 <div id="container"> 中的内容。但是图像的一部分已经移到 div 之外，现在不可见。

总结一下...

固定背景图时，背景图部分隐藏，移到div之外。图片位于浏览器窗口的右上角，而不是 div 的右上角。

希望大家能帮帮我!

Answer 1

这种行为实际上是正确的。任何 attachment: fixed 背景都将相对于视口(viewport)，而不是它所应用的元素。这实际上是 Eric Meyer 的 Complex Spiral 的基础演示。