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的文章。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

运行代码段并告诉我发生了什么。这是你正在寻找的吗？

在CSS中创建图层

1 个答案: