0

Webサイトに背景のような画像を使用しています

すべてのページを画像で覆うためにこれを置きました

body.questionary{
    background: url("../img/ques.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

私の画像はjpgです。サイズは703x883、サイズは258KBです。

問題は、ページを見ると、この画像がズームのように非常に大きいため、画像が完全に表示されないことです。画像の上部のみです。

何か案が！

4

2 に答える 2

3

ページが非常に高い場合はbackground-size:cover、背景画像が全体に表示されるように拡大縮小されbodyます。

ビューポートのみを塗りつぶしたい場合は、別の要素（bodyではなく）内に追加して、そのスタイルを設定する必要があります。

<body>
   <div id="background"></div>
...
</body>

と

#background{
   position:fixed;
   z-index:0;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background: url("../img/ques.jpg") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
于 2012-12-21T01:00:35.413 に答える
0

使用するbackground-size:100% 100%;

jsfiddleの例

仕様で定義されている値containとcoverアスペクト比を維持します

'contain'本来のアスペクト比（存在する場合）を維持しながら、画像の幅と高さの両方が背景のポジショニング領域内に収まるように、画像を最大サイズに拡大縮小します。

'cover'画像の本来のアスペクト比（存在する場合）を維持しながら、画像の幅と高さの両方が背景のポジショニング領域を完全にカバーできるように、画像を最小サイズに拡大縮小します。

于 2012-12-21T01:40:54.763 に答える