css - 是否可以屏蔽 或用屏蔽图像覆盖文本？

Question

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

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

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

感谢您的帮助。

Answer 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/