0

画像を歪めたり、比率を変えたりせずに、背景全体を塗りつぶすWebページの背景画像を作成したいと思います。

これの優れた実装は、LaunchRockのページやホームページなどで確認できます。

StackOverflowでこの質問を見ましたが、それを試してみると、背景画像の高さが100％、幅が100％であることがわかります。つまり、写真の元の比率が維持されず、画像が引き伸ばされます。

LaunchRockの例では、ブラウザウィンドウのサイズを変更すると、画像が比例して大きくなり、常にウィンドウ全体に表示されることに注意してください（使用するウィンドウや背景画像のサイズに関係なく）。

ブラウザウィンドウの幅が十分でない場合は、背景画像の側面をトリミングし（画像を中央に保ち、左側と右側をトリミングします）、ウィンドウの高さが十分でない場合は、背景画像の下部をトリミングします。

ブラウザウィンドウのサイズに関係なく、画像の高さ/幅の比率は維持され、背景全体が塗りつぶされます。

これは純粋なCSSでは実行できないと思います。JavaScriptが必要になる場合があります。何か案は？

ありがとう

4

4 に答える 4

2

これは、次のようにCSSのみで実行されます。

body {    
    background: black url(/images/back.jpg) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

それを可能にするもの：

  • background-sizeに設定されたCSSプロパティcoverとそのベンダープレフィックスバージョン
  • background-image側面が黒くフェードするを使用
  • 位置をに設定top center
  • fixedプロパティを使用する
于 2012-06-26T10:43:20.973 に答える
1

jQueryを使用してもかまわない場合は、http：//srobbin.com/jquery-plugins/backstretch/を試してみてください。

于 2012-06-26T10:44:38.297 に答える
1

例： http： //jsfiddle.net/rPhLa/

設定する必要があります：

 html,body{ height:100%; width:100%; }

したがって、それらは画面全体を占め、次に背景を占めます。

body { background-image: url(http://launchrock.com/images/back.jpg); background-repeat: no-repeat; background-position:center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }​
于 2012-06-26T10:45:55.503 に答える
1

例として使用したLaunchRockのページは、CCS3プロパティを使用していますbackground-size。これは、スケールの「魔法」を実行するプロパティです。

詳細background-size：http ：//www.css3.info/preview/background-size/

  • このプロパティのブラウザサポートを確認することを忘れないでください。

これは、JavaScriptを使用して、さらにはCSS2を使用して実行できる可能性が非常に高くなります。申し訳ありませんが、現在、例はありません。

于 2012-06-26T11:10:04.613 に答える