html - 背景上的透明文字？

Question

是否可以在白色背景上放置透明文本并在其后面放置图像，以便文本看起来是其后面图像的颜色。

这是我开始让你更好地理解我的意思的 JSFiddle:

http://jsfiddle.net/g3SfD/

现在文本是黑色的，但有没有办法让它透明，使文本的颜色与背景图像的颜色相同？

HTML:

<div class="image">
    <div class="box">
        <div class="text">Sample Text</div>        
    </div>
</div>

CSS:

.text {
    color: black;
    font-family: Arial;
    font-size: 72px;
    font-weight: bold;
}

.box {
    display: inline-block;
    background: white;
    padding: 5px 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -219px;
    margin-top: -47.5px;

}

.image {
    background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat;
    width: 960px;
    height: 420px;
    position: relative;
}

Answer 1

Demo

好的，感谢 this example由 ralph.m 提供，使用 -webkit-background-clip 似乎是可能的，它只会被可以使用 webkit 的浏览器支持。

.text {
    font-family: Arial;
    font-size: 72px;
    font-weight: bold;
    text-align: center;
    background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    background-position: -200px -50px;
}

您的背景大小和位置可能需要调整以适应。