在CSS中剪切文本，可行吗？

Question

假设我们有：

<div class="outer">
    <div class="inner">
        <span class="text">Hello!</span>
    </div>
</div>

“外层” div 具有线性渐变背景。 “内层” div 具有蓝色背景。 是否可以使文本颜色与“外层” div 的颜色相同。 类似于文本蒙版效果：

- Vitaly

---

你可以使用文本透明度，但问题在于它只会透明到内部div，所以它只会渐变为纯蓝色。它不会穿透到外部div。如果文本的大小和内容是静态的，那么你可能只能使用图像代替。 - KP.

我认为这个div结构仅使用CSS是不可能的。 - ggzone

我猜只有在webkit中可以：您可以在文本上使用与背景相同的渐变。请参见（并测试 :)）https://dev59.com/U2445IYBdhLWcg3wssTH - FelipeAls

Answer 1

您可以使用文本透明度KP提到的方法来伪造它。首先，将与外部div相同的渐变应用于span。然后，将蓝色背景应用于内部div，文本看起来像已被凸出。这里有一个示例fiddle。这是一篇文章详细介绍了这种技术。

请记住，此第一种技术在IE中不起作用。如果您确实想在IE中实现类似的效果，也可以使用此处显示的技术。此技术需要png和一些额外的标记，但它似乎可以在任何地方工作。由于这不是真正的文本掩码，因此您可能需要稍微调整一下才能得到完美的效果。

更新：进一步测试显示Firefox不显示第一种技术...我建议使用第二种技术，但这不再只是CSS，它需要一个图像。

- Alex Morales

---

印象深刻，但我只能看到它在Chrome中运作。 - My Head Hurts

是的，我刚在Firefox中测试了一下，它在那里无法工作。我会坚持使用第二种技术。它需要一个图像和一些非语义化的HTML，但我已经看到它在大多数情况下都能正常工作。 - Alex Morales

太好了。你得到了我的加一！ - My Head Hurts

哈，谢谢。我记得有一段时间我读过这个。不记得为什么了，但至少有点印象。 - Alex Morales

是的，与图像不同，您仍然必须根据背景指定文本颜色。但是至少使用这种技术可以处理渐变背景，而不仅仅是纯色填充。无论如何，这可能是您可以通过CSS获得的最好的东西，因此我将其标记为已接受。谢谢！ - Vitaly

谢谢，希望这很快就能更好地运作，并且我们会有更多的灵活性。 - Alex Morales