创建不同的CSS层

Question

你好，我是新来的CSS和我需要一些援助。我想为我的网站在CSS中创建3层，所以它看起来像我在下面提供的图片。

我怎么会去在CSS中设置此功能？任何帮助将非常感激。

谢谢。

Answer 1

您想了解z-index属性。但基本上，任何你应用z-index需要有一个position设置...我很确定static不起作用，但absoluterelative & 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>