文字陰影不落後漸變剪輯背景

Question

我想要獲得徽標使用漸變填充剪輯，然後放置在它後面的文字陰影。然而，陰影似乎總是置於頂端？

很明顯，我可以在SVG等中做到這一點，但由於其他原因，我想用CSS做到這一點。

我已經提前創造了一個小提琴「http://jsfiddle.net/Mgz6H/

請幫助。

感謝。

Answer 1

我用z-index的深度，創造了絕對的影子div元素。 請檢查更新的代碼here

CSS

.logo-shadow { 
    position:absolute; 
    top:0; 
    left:0; 
    text-shadow:3px 3px 3px black; 
    color:transparent; 
    z-index:0; 
} 

HTML

<div id="logo-container"> 
    <div class="logo"> 
     <span>Light</span> 
     <span id="swap">Meter</span> 
     <span id="me">.com</span> 
    </div> 
    <div class="logo-shadow"> 
     <span>Light</span> 
     <span id="swap">Meter</span> 
     <span id="me">.com</span> 
    </div> 
</div>​