文本阴影不在梯度剪辑背景后面

时间:2012-11-07 10:15:10

标签: css3 webkit css

我正在尝试使用带有剪辑的渐变填充徽标,然后在其后面放置文本阴影。但是阴影似乎总是放在最上面?

显然我可以在SVG中做到这一点,但出于其他原因,我想用CSS做。

我创造了一个小提琴“http://jsfiddle.net/Mgz6H/

请帮忙。

提前致谢。

1 个答案:

答案 0 :(得分:0)

我使用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>​