0

考えさせてください、どうすれば私の問題を説明できますか。たくさんの div レイヤーを含むスクロール ページがあります...上下に 1 つ! 背景画像の解像度は 1920x1080 px です。ただし、バックグラウンド ブラウザ ウィンドウ全体を埋める必要があります。たとえば、ブラウザウィンドウをスケーリングすると、画像は自動的にスケーリングされます。

非常に良い仕事をするいくつかのjqueryプラグインを見てきましたが、inview.jsを使用して視差効果を作成しようとしているため、背景画像がcssで定義されていることが重要です。これは可能ですか？

ありがとうテッド

4

2 に答える 2

1

background-size: coverこれは CSS3 プロパティであり、一部のブラウザではサポートされていませんが、これを使用できます。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

編集: CSS Tricksの厚意による接頭辞およびフォールバック ソリューション

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
于 2013-02-03T12:13:11.750 に答える
0

これを試して... 

html, body{
padding:0px;
margin:0px;
}

次に、イメージを超大型ディスプレイ (つまり、マルチスクリーンなど) で機能させるには、からスケーリングし<img>、低い z-index を設定します。

.background{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
z-index:0;
}


<img src="background.jpg" class="background">

background.jpg背景画像に変更し、<img>タグをページの下部に配置して、最後に読み込まれるようにします。z-index が適切なレベルで表示されない場合 (つまり、他の要素を覆っている場合)、z-index をいじる必要があるかもしれません。

于 2013-02-03T14:05:19.673 に答える