1

私は最近プロジェクトを行っています。フレンドリーなチュートリアルのおかげで、次のコードを見つけることができました。

CSS

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;
}

このコードは、画像が正しい比率を維持しながら画面全体を占めるように背景画像のサイズを変更し、画像の一部が画面よりも大きい場合は画像をトリミングしながらそれを行います。

私が抱えている問題は、背景に「続く」画像を Web ページに配置する必要があることです。（ブラウザのサイズ変更と同じ背景の領域をカバーし、常に同じ比率...など）しかし、私が試したすべての方法のうち、どれも機能せず、可能かどうか疑問に思っています。

というか、画像を背景にしなくても同じ効果が得られるのでしょうか？

4

1 に答える 1

2

「background-size:cover」を使用します。

.sizedbkgrd {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom:0px;
  right:0px;
  background-image: url(http://i3.photobucket.com/albums/y89/Aden93/dance-party.jpeg);
  background-repeat: no-repeat;
  background-size:cover;
}

そのクラスで div を作成します。

<div class="sizedbkgrd"></div>

jsFiddle:

http://jsfiddle.net/alforno/gXdRf/

于 2013-05-24T18:51:51.107 に答える