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

仅使用一个容器，然后您可以将行嵌套到其中。
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 {
    背景图像：url（'http://placehold.it/200x200'）；
    背景重复：重复-x；
    背景尺寸：100%；
}

.bg-img2 {
    背景图像：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 回答