如何在 Bootstrap 3/4 中创建响应式壁纸广告？答案

【问题标题】：How to create responsive wallpaper ad in Bootstrap 3/4?如何在 Bootstrap 3/4 中创建响应式壁纸广告？
【发布时间】：2016-10-17 10:52:35
【问题描述】：

我正在尝试将壁纸广告添加到一个看起来像图片上给出的东西的网站。我已经尝试使用 background-size:100% auto 基于来自here 的类似问题，我什至尝试将容器放入容器流体中，但布局不合适。要求是让图像浮动到内容，直到 with 小于 991 并且布局发生变化。我知道其他一些框架有这方面的类，但我就是不能让它工作。

我尝试过的示例：

这仅适用于非常大的屏幕。

html, body {
  background:url(images/static/rollup_web.png) no-repeat center center   fixed;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
}

<div class="container">
   @yield('content')
</div>

这产生的效果与前面的代码几乎相同：

background-size:100% auto;

这是一个相当的技巧，我得到的结果还可以，但图像太小，如果我扩大左右列，我的内容就会被尖叫太多：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-1">
      <!--Left Image of the wallpaper --> 
    </div>

    <div class="col-sm-10">
      @yield('content')
    </div>

    <div class="col-sm-1">
      <!--Right Image of the wallpaper --> 
    </div>
  </div>
</div>

【问题讨论】：

你有你使用的 HTML/CSS 代码的例子吗？
我已经添加了代码示例，尽管我已经清楚地说明了我在尝试解决这个问题时使用的两个概念。真的看不出因此而对问题投反对票的意义。

标签： twitter-bootstrap css

【解决方案1】：

使用像Backstretch这样的jQuery库它们足够强大，可以在任何屏幕的背景上都有一个很酷的响应图像

【讨论】：

【解决方案2】：

如果有人发现遇到类似的问题，我已经设法在不破坏 Bootstrap 网格和几行 CSS 的情况下解决它。该解决方案需要在 Photoshop 中准备好图像，其中图像的中间实际上是容器宽度为 1126px 的空白区域。把图片放到容器外

<div class="wallpaper-ad"> </div>

<div class="container">
   <div class="row"> 
      <!-- Content goes here --> 
   </div> 
</div>

这个风格是：

.wallpaper-ad {

    background: url(../images/static/image.png) no-repeat center center scroll;
    height:1300px; /* Depends on the image */
    width: 100%;
    position: absolute;
    z-index: -999;
}

@media only screen and (max-width:991px) { 
    .wallpaper-ad {
        display: none;
    }
}

【讨论】：