4

このような典型的なブートストラップレイアウトがあります

  <body>
    <div class="container">
      ...
    </div>
    <div class="container">
     ...
    </div>
 </body>

しかし、私はこれをしたいです

  <body>
    <div class="bg-img">
      <div class="container">
        ...
      </div>
      <div class="container">
       ...
      </div>
    </div>
  </body>

基本の背景色は土色ですが、メインコンテンツの背景画像が欲しいです。フレームワークのレスポンシブな側面に合わせて背景画像を適切にスケーリングしたいと思います。

私は基本的にこれが賢明かどうか知りたいですか？

4

2 に答える 2

4

コンテナを 1 つだけ使用すると、そのコンテナに行をネストできます。
html:

<div class="container">
<div class="row bg-img">
    <div class="col-xs3">...</div>
    <div class="col-xs3">...</div>
    <div class="col-xs3">...</div>
</div>
<div class="row bg-img2">
    <div class="col-xs-6">...</div>
    <div class="col-xs-6">...</div>

</div>

CSS:

.bg-img {
    background-image:url('http://placehold.it/200x200');
    背景繰り返し:繰り返し-x;
    背景サイズ: 100%;
}

.bg-img2 {
    background-image:url('http://placehold.it/200x200/fc43c');
    背景繰り返し:繰り返し-x;
    背景サイズ: 100%;
}

http://jsfiddle.net/8y9Hr/3

于 2013-11-09T11:26:50.917 に答える
0

「適切にスケーリングする」とは、たとえば幅 1000px の画像があり、ウィンドウが 1000px よりも狭い場合は、ウィンドウの幅に合わせて画像を縮小することを意味すると思います。

CSSbackground-sizeプロパティを使用できますが、これは IE8 以下では機能しません。

画面の幅に合わせて背景画像のサイズを変更する例。画像の高さは縦横比を維持しながら自動的に計算されます。

.bg-img {
    background: #f00 url('image.png') no-repeat center top;
    background-size: 100% auto;
}

メディア クエリを使用して異なるサイズの画像を設定し、モバイル デバイスが幅 2000 ピクセルの画像を読み込んでサイズを変更することを回避できます。

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

于 2013-11-09T11:25:12.023 に答える