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

【问题标题】：background image position fixed to parent element背景图像位置固定到父元素
【发布时间】：2023-04-04 14:40:01
【问题描述】：

我在页面某处有一个 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。

欢迎提出任何建议。

附言
iframe 不是一个选项。

【问题讨论】：

如果使用固定的背景附件值放置背景图像，则背景位置指的是视口，而不是元素的填充框。 - reference.sitepoint.com/css/background-position

标签： css background position fixed

【解决方案1】：

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

【讨论】：

【解决方案2】：

MDN for fixed 说：

这个关键字意味着背景相对于视口是固定的。

使用scroll 代替fixed：

该关键字表示背景相对于元素本身是固定的，并且不会随其内容滚动。（它有效地附加到元素的边框。）

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

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

【讨论】：

【解决方案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

【讨论】：