Question

我在页面的某处有一个div，我需要给它一个在滚动浏览器窗口时不会移动的背景图像。到目前为止，这是我的代码：

#mydiv {
    float:left;
    width:540px;
    margin:40px 0px 0px 20px;
    background:url(/images/myimage.jpg) no-repeat fixed 0px 0px transparent;
}

问题是我的背景图像是相对于画布定位的，我需要它相对于#mydiv定位，但仍然不能滚动。

要说明问题，请参阅此处http://jsfiddle.net/QPrUz/1/
在示例中#div1看起来不错，但#div2根本没有显示背景，因为它相对于画布而不是#div2定位。

欢迎任何建议。

P.S。
iframe不是一种选择。

Answer 1

根据Jawad的评论，使用CSS是不可能的。我最终将背景改为可重复的东西。

Answer 2

fixed的{p> MDN说：

此关键字表示背景是相对于视口修复的。

使用scroll代替fixed：

此关键字表示背景是关于元素本身修复的，不会滚动其内容。（它有效地附加到元素的边界。）

因此，粘性背景的完整代码相对于元素本身是固定的：

.sticky-background {
    background: url(...) no-repeat scroll;
}

Answer 3

如果我理解了这个问题，你只需要定位背景图像的顶部/左边，使div2看起来像div1。

这里是：http://jsfiddle.net/7kku4v1t/

我只改变了：

background:url(http://i35.tinypic.com/4tlkci.jpg) fixed no-repeat;

到

background:url(http://i35.tinypic.com/4tlkci.jpg) 210px 0 fixed no-repeat;
                                                  ^^^^^^^
                                                  X     Y

Answer 4

你必须使用一些javascript来实现这一点。

固定到父元素的背景图像位置

4 个答案: