0

背景があり、画像のサイズが 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>
.......
4

1 に答える 1

1

@meager のコメントに従って、船が入っている部分、フッター、繰り返しの背景を分割した方がよいでしょう。私はすでにこれのためにあなたの宿題をしました。

この JSFiddleをチェックして、私がどのようにテストしたかを確認してください。

HTML コード

<html>
  <head>
    ...
  </head>
  <body>
    <div id="top-image">
    </div>
    ...
  </body>
</html>

CSSコード

上部の場合:

#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*/
}

下部フッターの場合:

自分で考えてください！いや、冗談です。上記で上部に使用したのと同じ原理を使用してください.

画像

トップシップ部分: 上

中間の繰り返し部分: 真ん中

フッター: 下

于 2012-10-01T15:30:41.493 に答える