無法獲取背景圖像滾動使用CSS內容（背景附件：滾動）

Question

我想在divs滾動（不固定）的背景圖像。

我試圖複製示例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，如果不支持，則僅添加JavaScript hack。

請參閱this question爲什麼我必須在CSS中添加position: relative。