jquery - Bootstrap 背景覆盖将图像设置在 "container-fluid"内，以便高度填充页面

Question

阿罗哈，

这是我的笔 -- http://codepen.io/DarrenHaynes/full/gLoYpp/

以及那支笔的代码:

HTML:

<div class="container-fluid spiritual-background">
    <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-1"></div>
    <div class="col-md-4">
    </div>
      <div class="col-md-1"></div>
  </div>

  <div class="row">
    <div class="col-md-7"></div>
    <div class="col-md-4">
      <h2>When the going gets tough - the tough get going<br>There's no knowing how far they are going.<br>What if I add another line.</h2>
      <h3>- Billy Ocean</h3>
    </div>
      <div class="col-md-1"></div>
  </div>
   <div class="toolbar">
      <button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
      <button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
      <button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
      <button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
    </div>
</div>

CSS:

.spiritual-background {
  background: url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.toolbar {
  margin-bottom: 4%;
  margin-left: 56%;
}

.row {
  margin-top: 8%;
  margin-bottom: 7%;
}
h2 {
  text-align: center;
}

h3 {
  text-align: right;
}

我试图弄清楚如何让背景图像的高度完全显示，同时它仍然覆盖页面。目前图像中的岩石在图像底部被切掉，但我想看到图像的整个高度。

我想避免将图像放入“html”或“body”标签中 - 我将使用 jquery 在“container-fluid”标签中删除和添加类，以便在按下 4 个按钮之一时更改背景图像在工具栏中。换句话说，“.spiritual-background”将被删除并与我尚未创建的另一个类一起放置。

Answer 1

要使该区域全屏显示，只需将其放在页面的根部，将所有位置坐标设为 0 绝对定位，并为其指定负 z 索引，以便不位于任何其他元素之上。

回复:背景图像以及它如何适应全屏页面，您有 2 个选择。

background-size: cover(您现在拥有的)，浏览器将使图像全屏显示，但会剪掉部分背景以适应浏览器的宽高比。

.spiritual-background {
  background: url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
  background-size: cover;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
}

.toolbar {
  margin-bottom: 4%;
  margin-left: 56%;
}

.row {
  margin-top: 8%;
  margin-bottom: 7%;
}
h2 {
  text-align: center;
}

h3 {
  text-align: right;
}

<div class="container-fluid spiritual-background">
    <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-1"></div>
    <div class="col-md-4">
    </div>
      <div class="col-md-1"></div>
  </div>

  <div class="row">
    <div class="col-md-7"></div>
    <div class="col-md-4">
      <h2>When the going gets tough - the tough get going<br>There's no knowing how far they are going.<br>What if I add another line.</h2>
      <h3>- Billy Ocean</h3>
    </div>
      <div class="col-md-1"></div>
  </div>
   <div class="toolbar">
      <button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
      <button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
      <button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
      <button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
    </div>
</div>
CSS:

background-size: 100% 100%; 将显示整个图像，并将拉伸(stretch)图像的高度和宽度以匹配其所应用的元素的大小。在 99% 的情况下，这都会使图像倾斜，除非浏览器/元素与图像的长宽比完全相同。

    .spiritual-background {
      background: url(https://s19.postimg.org/tx1z2cgcz/feng_sway_rocks.jpg);
      background-size: 100% 100%;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: -1;
    }

    .toolbar {
      margin-bottom: 4%;
      margin-left: 56%;
    }

    .row {
      margin-top: 8%;
      margin-bottom: 7%;
    }
    h2 {
      text-align: center;
    }

    h3 {
      text-align: right;
    }

    <div class="container-fluid spiritual-background">
        <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-1"></div>
        <div class="col-md-4">
        </div>
          <div class="col-md-1"></div>
      </div>

      <div class="row">
        <div class="col-md-7"></div>
        <div class="col-md-4">
          <h2>When the going gets tough - the tough get going<br>There's no knowing how far they are going.<br>What if I add another line.</h2>
          <h3>- Billy Ocean</h3>
        </div>
          <div class="col-md-1"></div>
      </div>
       <div class="toolbar">
          <button type="button" id="spiritualQuote" class="btn btn-info"> Spiritual Quotes</button>
          <button type="button" id="techQuote" class="btn btn-info"> Tech Quotes</button>
          <button type="button" id="lifeQuote" class="btn btn-info"> Life Quotes</button>
          <button type="button" id="inspirationalQuote" class="btn btn-info"> Inspirational Quotes</button>
        </div>
    </div>