如何避免全屏幕背景圖像與出現的滾動條一起縮放？

我的客戶想爲她的新網站提供全屏幕背景。設置並沒有那麼複雜，因爲我選擇了一個CSS3-方法，併爲舊版本的IE-Versions提供了後備功能。這裏是CSS：如何避免全屏幕背景圖像與出現的滾動條一起縮放？

html { 
    /* Fullscreen backgroung image per CSS3 with 'background-size: cover' */ 
    background: url(../images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

現在，它確實如廣告中那樣工作。但是當我重新加載一個頁面或轉到另一個頁面時，加載背景圖像，出現內容，導致垂直滾動條，這使得背景圖像縮小一點（由於現在較小的觀看空間）併產生排序背景圖像上的「跳躍」效果 - 非常煩人！

如果一切都緩存起來很好，但否則會對背景圖像產生這種煩人的調整大小效果！

如何避免在內容之前加載背景圖像，以便它在第一次顯示正確！

來源

2012-12-17 Benjamin Pazdernik

爲什麼不總是顯示滾動條（模仿IE的其他瀏覽器的行爲），像這樣：

html { 
    overflow: -moz-scrollbars-vertical; 
    overflow: scroll; 
}

這裏是一個demo（在CSS臺），看它是否給你你正在尋找的行爲。

來源

2012-12-17 18:20:35

那麼這很快就完全解決了我的問題！非常感謝傑森！ –

我以前用過這個。 +1 – canon

嘗試添加一個具有固定位置和100％寬度和高度的div。相反，將您的背景樣式添加到該div。

來源

2012-12-17 18:28:25

如何避免全屏幕背景圖像與出現的滾動條一起縮放？

回答

相關問題