HTML背景圖片不滾動

正如你看到的，有在頂部和下方的滾動內容修復頭。黑色div內的內容滾動得很好，但圖像是固定的。我怎樣才能讓這個圖像滾動呢？

基本上，我所定義的主包裝如下：

body{ 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    margin: 0px; 
} 

#generalWrapper{ 
    height: 100%; 
} 

#header{ 
    height: 70px; 
    width: 100%; 
    background: #080808; 
} 

#content{ 
    overflow: auto; 
    position: absolute; 
    width: 100%; 
    top: 70px; 
    bottom: 0; 
    background: url("../images/background.jpg"); 
    background-repeat: repeat-y; 
}

與像

<body> 
    <generalWrapper> 
     <header> 
     </header> 
     <content> 
     </content> 
    </generalWrapper> 
</body>

然後，結構，內容div填充元件（其使比屏幕高這div並導致可滾動性）。但爲什麼背景圖像不受影響？

來源

2013-02-18 Valentino Ru

您可能需要考慮使用更寬的背景圖像。我在一臺2560像素的顯示器上，背景只佔用我屏幕寬度的3/4左右;其餘的是堅實的白色背景。 – Jules 2013-02-18 20:22:55

我嘗試了不同的方法。首先，我把背景圖片上的HTML，具有以下屬性

html{ 
    background: url("../background.jpg") center center #000; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

然後，我改變了標題和內容

#header{ 
    height: 70px; 
    width: 100%; 
    background: #080808; 
    position: fixed; 
    z-index: 55; 
    box-shadow: 5px 5px 5px 5px #080808; 
} 

#content{ 
    position: absolute; 
    width: 100%; 
    top: 70px; 
    bottom: 0; 
}

導致正是這種行爲我想要的（雖然Jules Mazur在評論中考慮的問題沒有解決，我會嘗試通過爲不同的分辨率提供不同的圖像來解決這個問題）。

來源

2013-02-20 00:18:39

它看起來像你滾動div是你contentdiv內，但contentdiv本身不滾動。嘗試查看W3C's Markup validator在您的網站上發現的錯誤列表。

來源

2013-02-18 20:16:55 Olexiy

嘗試將background-attacment設置爲scroll。 MDN有此屬性的文檔。

來源

2013-02-18 20:20:38 Jules

朱爾斯，我會建議不要使用W3School的任何技術參考，如果需要使用更有效的來源，如MDN https://developer.mozilla.org/es/docs/CSS/background這裏是爲什麼應該避免W3Schools http： //w3fools.com/ – leopic 2013-02-18 20:33:35

leopic，該網站沒有提到爲什麼應該避免W3Schools。什麼是關於W3Sschool的「無聲的」。至少4年後，它仍然出現在谷歌搜索結果的頂部，那麼這是什麼意思？ – thefoyer 2017-03-31 04:43:33

@thefoyer知名度不是可靠性的指標。 W3School始終過時，經常錯誤。在參與編程四年後，我可以誠實地說，MDN是高質量Web標準文檔的事實權威。 – Jules 2017-03-31 12:09:27

HTML背景圖片不滾動

回答

相關問題