在CSS中剪切文本。可能？

Question

说，我们有：

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

'外'div具有线性渐变背景。 'inner'div有蓝色背景。 是否可以使文本颜色与“外部”div的颜色相同。文本掩码效果的排序：

Answer 1

您可以使用提到的文字透明度KP伪造它。首先，在外部div上应用与跨度相同的渐变。然后，将蓝色背景应用于内部div，文本看起来就像被淘汰了一样。我有sample fiddle here。详细说明该技术的Here's an article。

请记住，第一种技术不适用于IE。如果你想在IE中也想达到类似的效果，你可以使用technique shown here。这种技术需要一个png和一些额外的标记，但它确实似乎无处不在。由于这不是真正的文本掩码，您可能需要稍微玩一下才能使它恰到好处。

更新：进一步测试显示Firefox没有显示第一种技术......我会坚持使用第二种技术但是它不再仅仅是CSS，它确实需要一个图像。