페이지의 CSS3 DropShadow

웹 사이트의 각 섹션/페이지 아래에 그림자를 만들려고하는데 문제가 있습니다. 사이트의페이지의 CSS3 DropShadow

데모 : http://www.sfu.ca/~jca41/stuph/test/parallax01/parallax01.html

HTML :

<section id="first" class="page shadow">   
    <article>first page</article> </section> 
<section id="second" class="page shadow"> 
    <article>second page</article> </section> 
<section id="third" class="page shadow">   
    <article>third page</article> </section> 
<section id="fourth" class="page shadow"> 
    <article>fourth page</article> </section>

CSS : 페이지 클래스에 상대와 그 각각의 섹션으로 Z- 인덱스를 추가

.page { height: 1000px; } 
.shadow { 
    -moz-box-shadow: 0 10px 10px #000; 
    -webkit-box-shadow: 0 10px 10px #000; 
    box-shadow: 0 10px 10px #000; 
} 
#first { background: url(img/01.png) no-repeat fixed; } 
#second { background: url(img/02.jpg) no-repeat fixed; } 
#third { background: url(img/03.jpg) no-repeat fixed; } 
#fourth { background: url(img/04.jpg) no-repeat fixed; }

출처

2012-06-26 Jon

브라우저가 제대로 작동하는 것 같습니다. 무엇을 기대하고 있었습니까? –

그림자가 있지만 다음 섹션에서 다루고 있습니다. – sachleen

나는 Chrome에서 테스트를 해왔습니다. 각 페이지 id에'z-index'를 추가하려고 시도했지만 작동하지 않습니다. 섹션이 그것을 덮지 못하게하는 방법은 무엇입니까? – Jon

위치 추가 상단에있는 것보다 아래에있는 z- 색인이 더 큽니다.

출처

2012-06-26 22:29:09 riku

완벽. 고맙습니다. – Jon

페이지의 CSS3 DropShadow

답변

관련 문제