如何修复div中的背景图像

Question

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

我有一个div#container(一个div为100%min-height(IE的高度))的页面,包含一个标题,一个"页面内容"和一个页脚.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将相对于视口,而不是它应用的元素.这实际上是Eric Meyer的复杂螺旋演示的基础.