4

私のクライアントは、新しいWebサイトのフルスクリーンの背景を望んでいます。古いIEバージョンのフォールバックを備えたCSS3メソッドを選択したので、セットアップはそれほど複雑ではありませんでした。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 に答える