Question

我有像这样的典型引导布局

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

基本背景颜色将是一种肮脏的颜色，但我想要一个主要内容的背景图像。我希望背景图像能够适应框架的响应方面。

我基本上想知道这是否可行？

Answer 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');
    background-repeat:repeat-x;
    background-size: 100%;
}

.bg-img2 {
    background-image:url('http://placehold.it/200x200/fc43c');
    background-repeat:repeat-x;
    background-size: 100%;
}

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

Answer 2

通过“适当缩放”，我想你的意思是你有一个例如1000px宽，如果窗口窄于1000px，您希望图像缩小以适合窗口的宽度。

您可以使用CSS background-size属性，但这在IE8及以下版本中无效。

调整背景图像大小以适应屏幕宽度的示例，其中图像高度是在保持比例的同时自动计算的：

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

您可以使用媒体查询设置不同尺寸的图片，以避免例如移动设备加载2000px宽的图像并调整其大小。

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

如何包装我的引导容器，以便我可以拥有缩放图像背景？

2 个答案: