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

我在页面的某个地方有一个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不是一个选项。

来源

2011-06-12 6bytes

如果背景图像已使用固定的背景附件值放置时，背景 - 位置是指视口，而不是元素的填充框。 - http://reference.sitepoint.com/css/background-position – Jawad 2011-06-12 18:17:43

根据Jawad的评论，它不可能使用CSS。我最终改变了一个可重复的背景。

来源

2011-07-28 10:29:25 6bytes

-1

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

来源

2011-06-12 18:30:54 6nagi9

MDN为fixed说：

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

使用scroll代替fixed：

这个关键字意味着后台固定相对于元素本身，不与它的内容滚动。（它有效地连接到元素的边界。）

所以，粘背景完整的代码相对固定的元素本身：

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

来源

2015-08-10 08:05:34 ilyaigpetrov

如果我的理解这个问题，你只需要位置背景图像的顶部/左侧，以便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

来源

2017-08-29 20:53:01 gcb

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

回答

相关问题