Question

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

我天真的尝试：

＆＃13;

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

＆＃13;

<span>Test</span>

＆＃13;

Answer 1

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

Fiddle

基本上，这个想法是让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;
}

修改

我刚刚找到wonderful article on 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＆s并不是很好，其他人也许可以修复它。无论如何，这里的弱点是，正确和可靠地定位这是一个真正的痛苦，而你自动使用仅限Webkit的解决方案。

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

1 个答案: