创建不同的CSS层

Question

您好，我是CSS新手，需要一些帮助。 我想在CSS中为我的网站创建3层，因此它看起来像下面提供的图片。

我将如何在CSS中进行设置？ 任何帮助将非常感激。

谢谢。

Answer 1

您想了解z-index属性。 但基本上，将z-index应用于任何对象都需要设置position ...我很确定static不起作用，但是absolute relative和fixed都可以。 那么您可以订购它们。 例如：

.div-background{
  z-index:1;
  position:relative;
}
.div-middle{
  z-index:2;
  position:relative;
}
.div-front{
  z-index:3;
  position:relative;
}

说得通？

Answer 2

您所要做的就是将图案的背景img添加到CSS中，这是代码示例

div {
background: url(../images/purpalt.png) repeat; 
}

[ http://www.bootply.com/4iBwk4Tmfr][1]

/* CSS used here will be applied after bootstrap.css */

/* Custom container */
.container-full {
  margin: 0 auto;
  width: 100%;
  background: #666;
}

.jumbotron {
    background: black;
  height: 553px;

  }

.container {
    background: #ccc;
    padding: 15px 10px;
    height: 553px;
    width: 960px;
  }

  .image-box {
    background: #fff;
      text-align: center;
      height: 500px;
    }

  footer {
      background: orange;
      height: 190px;


<div class="container-full">

      <div class="jumbotron">

      </div>

  <div class="container">
    <div class="col-md-12">
      <div class="image-box">
    Image to go here

      </div>
    </div>


  </div>    


</div> <!-- /container full -->
<footer></footer>