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-index的添加到每個部分，因此：

.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上進行測試。我曾嘗試將'z-index'添加到每個頁面ID，但它不起作用。我將如何防止這些部分覆蓋它？ – Jon

位置添加頂部的Z值比下面的Z值大。

來源

2012-06-26 22:29:09 riku

完美。謝謝。 – Jon

CSS3 DropShadow在頁面上

回答

相關問題