使用CSS为透明文本添加阴影

Question

有没有办法为透明文本添加阴影,以便文本背后的背景仍然可见？也许某种方式使用文本本身作为掩码？或文本混合模式(具有合理的跨浏览器支持)？

我天真的尝试:

span {
    background-image: url(http://i.imgur.com/EWDVnfb.png);
    color: #FFF;
    font-family: sans-serif;
    font-size: 100pt;
    font-weight: bold;
    line-height: 2em;
    padding: .5em;
    text-shadow: 0 0 .5em #F00;
}

<span>Test</span>

Answer 1

这是适用于Chrome和Safari的解决方案:

小提琴

基本上,这个想法是让彼此div过分夸大.较低的一个提供背景和阴影.上面的div只使用一个蒙版从背景图像中剪切出完全相同的文本,这样它就会覆盖下部元素的文本,而不是阴影:

div {
    position:absolute;
    top:0;
    left:0;
    background-image: url(http://i.imgur.com/EWDVnfb.png);
    font-family: sans-serif;
    font-size: 100pt;
    font-weight: bold;
    line-height: 2em;
    padding: .5em;
}
div.shadow {
    color: #fff;
    text-shadow: 0 0 .5em #F00;
}
div.text {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

编辑

我刚刚在css-tricks.com上发现了一篇很棒的文章.所以,似乎有一个更好的浏览器支持的解决方案.我的想法是用包含相同文本的顶层div和svg替换,并使用模式用背景图像填充文本,这里是草图:

<div class="shadow">Test</div>
<div>
    <svg width="400" height="200">
        <pattern id="mask" patternUnits="userSpaceOnUse"
             width="400" height="200" viewbox="0 0 400 200">
            <image xlink:href="..." width="300" height="300" />
        </pattern>
        <text x="0" y="1em">Test</text>
    </svg>
</div>

CSS(除了我上面的解决方案的CSS):

text {
  fill:url(#mask);
}

我一直试图让这个工作也取得成功,并取得了部分成功.(DEMO)但我对svg并不是很好,其他人也许可以解决它.无论如何,这里的弱点是,正确和可靠地定位这是一个真正的痛苦,而你自动使用仅限Webkit的解决方案.