在 CSS 中创建图层

Question

我有一个问题，我怀疑答案很简单。我正在使用 Bootstrap 制作个人网页，并尝试将背景分成 3 个相等的列（它们都有不同的图像）。

我知道这可以用 class="col-xs-4" 来完成，但问题是我想保持背景的原样（它是一个响应式的“col-lg-12” ）。

有没有办法分割我的背景（再次，将图像上传到 3 个面板中，这些面板基本上会掩盖整个图像），并且仍然在顶部保留所有“col-lg-12”标题内容?

感谢您提供的任何帮助，我当前的 html 代码是这样的：

<header>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="img/picture.png" alt="">
                    <div class="intro-text">
                        <span class="intohead">Filler Text</span>
                        <span class="subhead">More detailed, longer filler text for below</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

Answer 1

基本上，有三列带有背景图像，然后在三列顶部放置一个封面div。你可以把任何你喜欢的东西放在封面div。这是一篇关于CSS positioning的文章。

.wrap {
  width: 100%;
  height: 300px;
  position:relative;
}
.section {
  float: left;
  height: 300px;
  width: 33.33333%;
}
.one {
  background: url(http://placehold.it/200x300/ccc/666/&text=img+1) no-repeat;
  background-size: 100%;
}
.two {
  background: url(http://placehold.it/200x300/666/ccc/&text=img+2) no-repeat;
  background-size: 100%;
}
.three {
  background: url(http://placehold.it/200x300/ccc/666/&text=img+3) no-repeat;
  background-size: 100%;
}
.cover {
  width: 100%;
  height: 100%;
  /*A background isn't needed, it's just to show that the element is there*/
  background: salmon;
  opacity: .5;
  /* this stuff is key */
  position: absolute;
  top: 0;
  left: 0;
  /* place cover on top */
  z-index: 10;
}

<div class="wrap">
  <div class="cover">Put all you content in here</div>
  <div class="section one"></div>
  <div class="section two"></div>
  <div class="section three"></div>
</div>

运行代码 sn-p 并告诉我会发生什么。这是你要找的吗？