如何避免全屏幕背景图像与出现的滚动条一起缩放？

我的客户想为她的新网站提供全屏幕背景。设置并没有那么复杂，因为我选择了一个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

如何避免全屏幕背景图像与出现的滚动条一起缩放？

回答

相关问题