4

ウィンドウのサイズを変更しても、背景がブラウザに収まらないようです。助けてください！何が起こっているかを示す画像は次のとおりです:画像を見る 最初の画像はどのようにフィットするか、2 番目は水平方向に伸ばしたとき、3 番目は垂直方向に伸ばしたときです (申し訳ありませんが、なぜアップロードしたのかわかりません)画像2回）

これが私が使用している私のコードです:

body {
    background: url('images/bkg-img.png');
    repeat: no-repeat;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
4

3 に答える 3

2

問題は、バックグラウンド ポジショニング領域( W3C ページbackground-size: coverを参照) をカバーすることです。これは、場合によっては、ボディの計算された高さです。常に窓と同じ高さではありません！

私が見つけた最も簡単な解決策は、

 html {height:100%}

スタイルシートで。ただし、希望どおりに動作させるには、セットアップを少し試してみる必要がある場合があります。ブラウザーによって異なり、標準モードと互換モードのどちらを使用しているかによって異なると確信しています。

于 2013-04-25T19:08:43.540 に答える
1

これを行うには多くの方法があります。画像background-imageを本体のように設定すると、縮小も拡大もされず、同じままになります。これは予想される動作です。

sthを使用できます。このように：

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

そしてそれらのスタイル：

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

背景画像の上にコンテンツを配置できるようにするには、次のように別の div 内にコンテンツを配置します。

<div class="pagewrap">
    <p>Content</p>
</div>

そしてそれのクラス：

.pagewrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

z-indexに関するデモやその他の手法を表示します。

于 2013-04-25T18:41:43.043 に答える
0

固定画像

ページと一緒にスクロールするために背景画像が必要ない場合でも、設定すれば背景画像をbodyタグに適用できます。background-attachment: fixed;

body {
    background: url('images/bkg-img.png') no-repeat 0 0 fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

jQuery

背景画像をページとともにスクロールする必要がある場合は、HTML と CSS を比較的シンプルに保つために、JavaScript または jQuery コードを適用する価値があるかもしれません。

function stretchBg(width, height, contain) {
    var pageWidth  = $(document).width();
    var pageHeight = $(document).height();

    if ((pageWidth / pageHeight) > (width / height) == !!contain)
        $('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
    else
        $('body').css({backgroundSize: pageWidth + 'px auto'});
}

$(document).ready(function(){ stretchBg(640, 480); });   // Page load
$(window).resize(function(){  stretchBg(640, 480); });   // Browser resize

JSFiddle デモ   (およびデモのスタンドアロン バージョン)

縦横比を維持するために、画像のネイティブの幅と高さが上記の関数に渡されます。また、背景画像がページを覆うか、ページを含むか (デフォルトはカバー) のオプションの 3 番目のパラメーターも一緒に渡されます。

または、body タグに現在適用されている背景画像のネイティブ解像度を自動的に検出する、より高度なデモ(およびスタンドアロン バージョン) を次に示します。以下は使用例です。

$(document).ready(function(){
    FullBodyBackground.init({contain: false});
});
于 2013-04-25T19:53:43.563 に答える