使用CSS为透明文本添加投影效果

Question

使用CSS为透明文本添加投影效果

7

有没有办法给透明文本添加投影，以便文本后面的背景仍然可见？也许可以使用文本本身作为遮罩层？或者使用文本混合模式（具有合理的跨浏览器支持）？

我的天真尝试：

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>

- lwiseman

2

"color: transparent" 不起作用，因为根据"与 box-shadow 不同，文本阴影不会被剪裁到阴影形状，并且如果文本是部分透明的，则可能会透过。"的规定，文本阴影不会被剪裁到阴影形状并且可能会透过。 - BoltClock

1

我有点解决了它，但我觉得这种方法太过hacky，不适合作为答案发布。它应该可以在Webkit浏览器上工作。 - JCOC611

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mmgross · Accepted Answer

这里有一个在Chrome和Safari上有效的解决方案：

基本上，思路是有两个叠加的div。下面的提供背景和阴影，上面的使用蒙版从背景图片中剪切出完全相同的文本，以便它覆盖下面元素的文本，但不覆盖阴影： Fiddle

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上发现了一篇精彩的文章，所以似乎有一个具有更好浏览器支持的解决方案。思路是用包含相同文本的svg替换顶层div，并使用模式将文本用背景图像填充，下面是一个草图：

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

我一直试图使这个工作部分成功。（演示）但是我不太擅长svg，可能有其他人能够修复它。无论如何，这里的弱点是，在你使用Webkit-only解决方案自动正确定位时，将其正确可靠地定位是一件真正令人头痛的事。