如何background-attachchement：固定到一個div而不是視口

我有一個很大的背景封面。如何background-attachchement：固定到一個div而不是視口

<div id="cover"> 
    ... 
</div>

而CSS

#cover { 
    background:url('cover.jpg') no-repeat fixed center center/cover; 
    height: 350px; 
    width: 100%; 
}

預期輸出：背景圖像，調整爲350像素×100％（在我的情況350x900），應該有基於滾動效果在<div id="cover"></div>上。

實際輸出：背景圖像，調整爲視（在我的情況1440），具有基於<html></html>滾動效果。

我想要的是background-attachchement：固定爲相對於div而不是視口。

來源

2014-08-27 Kalzem

那是不可能的，'fixed'總是在對於視，那就是它是如何規定的。取決於你實際想要達到什麼（不確定你實際上是什麼意思_「我想要的是背景 - 附件：固定爲相對於div而不是視口」_）可能會有解決方法。 – CBroe 2014-08-27 13:43:57

我正在尋找固定附件（使用純CSS3）的「視差」效果。就像新的Twitter封面效果一樣。哦，而且不會因爲大部分視差問題而出現延遲。 – Kalzem 2014-08-27 13:50:06

不是真正理解你在這裏問什麼，但是如果你只是在尋找CSS的視差，你應該檢查一下：http://blog.keithclark.co.uk/pure-css-parallax-websites/?utm_source=dlvr。它＆utm_medium =微博 – 2014-08-27 14:10:22

背景圖像默認爲「固定」到它們所連接的元素。當您將CSS背景屬性設置爲固定的時候，它會爲DOM元素做同樣的事情，這會使其對整個文檔（視口）進行修復。

改變固定資產滾動應該在這裏做的伎倆：

background:url('cover.jpg') no-repeat scroll center center/cover;

來源

2014-08-27 13:46:11

如何background-attachchement：固定到一個div而不是視口

回答

相關問題