4

我的客户想要她的新网站的全屏背景。设置并没有那么复杂，因为我选择了一种 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')";
}

现在这确实像宣传的那样工作。但是当我重新加载一个页面或转到另一个页面时，背景图像会加载，然后出现内容，这会导致垂直滚动条，然后使背景图像缩小一点（由于现在更小的查看空间）并产生排序背景图像上的“跳跃”效果 - 非常烦人！

如果所有内容都被缓存，那很好，但否则背景图像上会有这种烦人的调整大小效果！

我怎样才能避免在内容之前加载背景图像，以便它在第一时间正确显示！

4

2 回答 2

5

为什么不总是像这样显示滚动条（模拟 IE 在其他浏览器中的行为）：

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

这是一个演示（在 CSS Desk 中），看看它是否为您提供了您正在寻找的行为。

于 2012-12-17T18:20:35.487 回答
1

尝试添加一个具有固定位置和 100% 宽度和高度的 div。而是将您的背景样式添加到该 div 中。

于 2012-12-17T18:28:25.823 回答