在CSS中剪切文本。可能？ [英] Cut out text in CSS. Possible?

问题描述

说，我们有：

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

'outer'div有一个线性渐变背景。
'inner'div有一个蓝色的背景。
可以使文本颜色与'outer'div的颜色相同。文字蒙版效果的排序：

The 'outer' div has a linear gradient background. The 'inner' div has a blue background. Is it possible to make text color the same as color of the 'outer' div. Sort of a text mask effect:

推荐答案

您可以使用文本透明度KP来提供。首先，对外部div应用与span相同的渐变。然后，将蓝色背景应用于内部div，文本将看起来像是已经被淘汰。我有一个这里的例子。 这里有一篇文章详细介绍了该技术。

You can fake it by using the text transparency KP mentioned. First, you apply the same gradient to the span as you have on the outer div. Then, you apply the blue background to the inner div and the text will look like it's been knocked out. I have a sample fiddle here. Here's an article that details the technique.

请记住，第一种方法在IE中不起作用。如果您确实希望在IE中实现类似的效果，您可以使用此处显示的技术。这种技术需要一个png和一些额外的标记，但它似乎无处不在。因为这不是一个真正的文本掩码，你可能需要玩一点，使它正确。

Remember, this first technique will NOT work in IE. If you do want to achieve a similar effect in IE as well you can use the technique shown here. This technique requires a png, and some extra markup but it does appear to work everywhere. Since this isn't a real text mask, you may have to play with it a bit to get it just right.

更新：进一步的测试表明，Firefox不显示第一种技术...我会坚持使用第二个，但是它不再只是CSS，它需要一个图片。

Update: Further testing shows that Firefox doesn't display the first technique... I would stick with the second but then it's no longer just CSS, it does require an image.

这篇关于在CSS中剪切文本。可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！