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

我在頁面的某個地方有一個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

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

回答

相關問題