在CSS中剪切文本.可能？

Question

说,我们有:

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

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

Answer 1

您可以使用提到的文本透明度KP伪造它.首先,在外部div上应用与跨度相同的渐变.然后,将蓝色背景应用于内部div,文本看起来就像被淘汰了一样.我这里有个小提琴. 这是一篇详细介绍该技术的文章.

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

更新:进一步测试显示Firefox没有显示第一种技术......我会坚持使用第二种技术但是它不再只是CSS,它需要一个图像.