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

是否有方法向透明文本添加阴影，以便文本后面的背景保持可见？也许可以用文字本身作为遮罩？还是文本混合模式（具有合理的跨浏览器支持）

我天真的尝试：

span{
背景图片：url(http://i.imgur.com/EWDVnfb.png);
颜色：#FFF；
字体系列：无衬线；
字体大小：100pt；
字体大小：粗体；
线高：2米；
填充：.5em；
文本阴影：0.5em#F00；
}

---

Test

以下是一个适用于Chrome和Safari的解决方案：

基本上，这个想法是让2个

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;
}

编辑

我刚刚找到一个解决方案，似乎有一个更好的浏览器支持解决方案。其想法是用包含相同文本的顶层div by和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>

---

我也一直在努力让它发挥作用，取得了部分成功。（）但是我对svg不是很在行，其他人可能会修复它。不管怎么说，这里的缺点是，正确可靠地定位这一点是一个真正的痛苦，而使用Webkit only解决方案自动正确地定位这一点。

color:transparent

将不起作用，因为我认为它太粗糙，无法作为答案发布。它应该适用于webkit浏览器。请注意，这是webkit专有的，而不是在其他地方实现的<代码>-webkit文本填充颜色似乎是

颜色

的内部替换，而

背景剪辑

的

文本

值不出现在背景3或4中-可能是因为当它是您正在设置样式的前景文本而不是背景时，它没有真正意义。

text {
  fill:url(#mask);
}