是否可以屏蔽 <div>，或者用屏蔽图像覆盖文本？

【问题标题】：Is it possible to mask a <div>, or to overlay text with a masked image?是否可以屏蔽 <div>，或者用屏蔽图像覆盖文本？
【发布时间】：2012-05-07 08:43:01
【问题描述】：

我几乎可以肯定这是不可能的，但只是想问一下我是否正确。

我有一个带有纯色背景颜色的容器，其中包含文本。这漂浮在图像上。目前，文本颜色是黑色，但我想要的是文本变得透明，这样我就可以透过 s 背景颜色看到它后面的图像。我知道这听起来不可能，所以我认为如果我用相同的图像覆盖文本但以某种方式掩盖它以便只有覆盖文本的部分可见，我可以达到相同的效果。

我希望我的意思很清楚。如果有人知道我该如何做到这一点，我会很高兴，如果不能做到，请指出一些证据为什么不能做到:)

感谢您的帮助。

【问题讨论】：

标签： css image

【解决方案1】：

在基于 webkit 的浏览器中有一个名为 -webkit-background-clip: text 的属性。像这样写：

p{
    background-image:;
    background:  url(http://2.bp.blogspot.com/-NSwhl6hv41Y/Th5EIJL_zZI/AAAAAAAAFc4/UGUNfb--tGc/s1600/vector_wallpaper_by_seppoftw.jpg);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-size:100px;
    margin:40px;
}

查看http://jsfiddle.net/yvYG8/

阅读本文了解更多http://trentwalton.com/2011/05/19/mask-image-text/

【讨论】：

链接是正确的，但我建议使用那里解释的其他选项：mask-image。
感谢您的回答。看起来不错，可惜这不适用于所有浏览器。但很高兴知道它可以做到:)