通过 CSS 到 <div> 的背景图像会扭曲子 div

Question

这是我的第一个问题。 我的代码在codepen。

我一直在修改这段代码中的 Bootstrap、CSS 和 jQuery，试图在我的页面上的最后一个 featurette（来自 Bootstrap 演示）项目后面放置一个全角背景图像。我猜这个问题源于引导容器类，但我希望能解决这个问题。

我已经用 div 标签封闭了这个功能，为其应用了一个 ID 为“background1”，然后使用 CSS 尝试将位置设置为绝对和左：0。

这让我得到了我想要的位置（除了我还希望背景图像像 Bootstrap img-responsive 一样响应），但是孩子？标签继承不透明度和定位。

我尝试过 z-index:-1 失败。似乎正在发生的事情是，低不透明度允许页脚爬到我的最后一个特色项目中，就好像不透明度也与 z-index 混淆一样。

所以我的问题是：

1. 如何将 BG 图像拉伸到花絮背面或 DIV 标签内的任何其他分组项目集？
2. 如何使用 Bootstrap 使此 BG 图像响应式或通过 CSS 应用 img-responsive 类？

新年快乐！感谢阅读！

Answer 1

不要包装您的内容。在内容之前使用<div id="background1"></div>，这样：

#background1 {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.3;
  left: 0;
  background-size: cover;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg/800px-Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg");
}