我的客户想要她的新网站的全屏背景。设置并不复杂,因为我选择了CSS3方法,并为旧的IE版本提供了回退。这是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')";
}
现在这确实像宣传的那样有效。但是当我重新加载页面或转到另一个页面时,加载背景图像,然后出现内容,这会导致垂直滚动条,然后使背景图像缩小一点(由于现在较小的查看空间)并产生排序对背景图像的“跳跃”效果 - 非常讨厌!
如果所有内容都被缓存,那很好,但是否则会对背景图像产生令人讨厌的调整大小效果!
如何避免在内容之前加载背景图片,以便第一次显示正确!
答案 0 :(得分:5)
为什么不总是显示滚动条(模拟IE在其他浏览器中的行为),如下所示:
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
这是一个demo(在CSS Desk中),看看它是否为您提供了所需的行为。
答案 1 :(得分:1)
尝试添加一个div,其位置固定,宽度和高度均为100%。将背景样式添加到该div中。