我有背景，图片大小是 6 MB，我不会写background: url(...)。
这个长页面由 6 个部分组成，我决定将背景划分为 6 张图片，我希望每个块的背景一个接一个地加载，并在背景加载之前在每个块中显示一个预加载器。
<div class="page" id="page_1">
<div class="preloader"></div>
<div class="page-content"></div>
</div>
<div class="page" id="page_2">
<div class="preloader"></div>
<div class="page-content"></div>
</div>
<div class="page" id="page_3">
<div class="preloader"></div>
<div class="page-content"></div>
</div>
.......
根据@meager 的评论，您最好将其中有船的部分、页脚和重复背景分开。我已经为这个做了你的功课。
看看这个 JSFiddle看看我是如何测试它的。
<html>
<head>
...
</head>
<body>
<div id="top-image">
</div>
...
</body>
</html>
对于顶部：
#top-image {
background: url('top.jpg');
background-repeat: no-repeat; /*to counteract the default value*/
width: 100%; /*this may get screwed up otherwise*/
height: 850px; /*allowing a bit more height to remain safe*/
}
对于中间重复部分：
body {
background: url('middle.jpg');
background-repeat: repeat-y; /*want this one to repeat*/
background-position: 0px 835.5px; /*so it fits perfectly with the overlayed image*/
}
对于底部页脚：
自己想办法！不，开玩笑的。只需使用我上面用于顶部的相同原理即可。
船顶部分：
中间重复部分：
页脚：
