在 CSS 中制作图层

Question

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

我知道这可以用 class="col-xs-4" 来完成，但问题是我想保留背景 as-is 的内容（这是 "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>

运行代码片段并告诉我发生了什么。这是您要找的吗？

在 CSS 中制作图层

Making layers in CSS

html

css

layer

multiple-columns

twitter-bootstrap-3