Question

我正在尝试使div中的背景图像可滚动（不固定）。

我尝试过复制示例2 :(通常可以工作......例如IE9）

http://www.codertools.com/css_help_guide/css_background-attachment.aspx

这是我的版本:(有时不起作用）

http://sky-walker.net/temp/panning/panning2.html

我基本上复制并粘贴了代码（图像文件的路径除外），但如果我滚动div，背景图像会保持固定...

我希望滚动背景图片，如示例2所示。

我的问题发生在IE9（Windows 7）和Chrome 12（Windows 7和Windows XP）中，而不是IE6（Windows XP）。在Chrome 12 for Vista中，第一个链接（示例2）也不起作用。

Answer 1

为什么背景图片会滚动？你的例子对我来说都是一样的。

CSS2 specs：

如果元素具有滚动机制（请参阅“溢出”），则“固定”背景不随元素移动，并且“滚动”背景不会随滚动机制移动。

CSS3 specs：

滚动
关于元素本身的背景是固定的，不会滚动其内容。（它有效地附加到元素的边界。）

背景会使用视口滚动。

编辑：我认为你真正想要的是CSS3的local背景附件：

本地
背景是关于元素的内容修复的：如果元素具有滚动机制，背景将滚动元素的内容。

Answer 2

我在这里发布这个是因为我最近有一种情况需要我“欺骗”旧版浏览器产生background-attachment: local - 就像行为一样。

正如this table指出的那样，IE8和Firefox不支持local，而IE6-7因错误原因而正确。使用一些jQuery技巧（可以由充分确定的人在纯JavaScript中重写），我们可以检测元素是否支持local，如果不是，则模拟滚动背景：

HTML：

<div id="main">
...
</div>

CSS：

#main {
    background-attachment: local;
    overflow: auto;
    position: relative; /* IE7 wants this for unrelated reasons */
    ...
}

jQuery的：

if ($('#main').css('background-attachment')!=="local") { 
    // will return the default value of 'scroll' in older browsers
    $('#main').on('scroll',function() {
        $main = $(this);
        $main.css({ 
            'background-attachment': 'fixed',
            'background-position': '0px '+(0-$main.scrollTop())+'px' 
             // firefox doesn't support 'background-position-y'
        });
    });
}; // end if

如果支持CSS local，则使用CSS position: relative，如果不支持，则添加JavaScript hack。

请参阅this question，了解我必须在CSS中添加{{1}}的原因。

无法使用css（background-attachment：scroll）使用内容滚动背景图像

2 个答案: