Прозрачный текст на фоне?

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

Я предполагаю, что вы ищете функции RGBA(). Он принимает 4 параметра, 3 цвета каналов и одну альфу, которая управляет непрозрачностью цвета.

Answer 2

Demo

Ok благодаря 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; 
} 

Размер и положение фона могут потребоваться для настройки.