我发现一个相当奇怪的问题,我觉得我知道如何解释;我只是不知道如何解决它!
我有一个页面包含一个div#容器(一个具有100%最小高度的div(高度为IE)),包含一个标题,“页面内容”和页脚. div#容器的背景图像应该是固定的(不是固定的位置,而是背景附件:固定,当您滚动时会使图片跟随).
问题是,当固定的附件被添加到CSS中的背景标签时,背景图片现在位于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%; }
边距:0自动;是将div和重要事物置于第一高度:是使IE忽略那个特定的高度标记.如果最小高度: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 id =“container”>但图像的一部分已经移动到div之外,现在看不见.
总结一下…
当背景图像固定时,背景图像部分隐藏,移动到div之外.图像定位到浏览器窗口的右上角,而不是右上角的div.
希望你们可以帮助我!
解决方法
这个行为其实是正确的.任何附件的背景:固定将相对于视口,而不是其应用的元素.这实际上是Eric Meyer的
Complex Spiral演示的基础.