다른 CSS 레이어 만들기

Question

안녕하세요 저는 CSS에 익숙하며 도움이 필요합니다. 내 웹 사이트의 CSS에서 3 개의 레이어를 만들고 싶습니다. 아래 그림과 같습니다.

어떻게 CSS에서이 설정에 대한 갈 것이라고? 어떤 도움이라도 대단히 감사 할 것입니다.

고마워요.

Answer 1

z- 색인 속성에 대해 배우고 싶습니다. 하지만 기본적으로 z-index에 적용하면 position 세트가 필요합니다 ... 나는 이 작동하지 않는다고 확신하지만 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

당신이 CSS를 에 패턴의 배경 IMG를 추가하기 만하면됩니다 다음은 마크 업의 어떤 종류를 제공하지 않은

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>