배경 위에 투명 텍스트?

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 개의 색상 채널 및 색상의 불투명도를 제어하는 ​​1 개의 알파를 사용합니다. ralph.m에서 제공 this example에

Answer 2

Demo

좋아 덕분에, 그것은 단지 웹킷을 사용하여 브라우저에서 지원 될 -webkit-background-clip를 사용하여 가능 보인다.

.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; 
} 

귀하의 배경 크기와 위치는 맞게 조정해야 할 수도 있습니다.