问剪切CSS中的文本。有可能吗？
EN

Stack Overflow用户

提问于 2012-02-01 00:14:24

回答 1查看 5.5K关注 0票数 17

比如说，我们有：

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

'outer‘div有一个线性的渐变背景。“内部”div的背景是蓝色的。有没有可能使文本的颜色与'outer‘div的颜色相同。一种文本蒙版效果：

回答已采纳

发布于 2012-02-01 01:09:22

你可以使用KP提到的文本透明性来伪造它。首先，对span应用与在外部div上相同的渐变。然后，将蓝色背景应用到内部div，文本看起来就像被剔除掉了一样。我有一台sample fiddle here。Here's an article详细介绍了这项技术。

请记住，第一种技术在IE中不起作用。如果你也想在IE中达到类似的效果，你可以使用technique shown here。这项技术需要一个png和一些额外的标记，但它似乎在任何地方都有效。由于这不是一个真正的文本掩码，您可能需要尝试一下才能使其恰到好处。

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9082909

复制

相似问题

问剪切CSS中的文本。有可能吗？EN