使div的文本部分透明

Question

我需要找到一種方法來查看div後面的圖像，通過div中的文本：

E.g.

我的字體作爲Web字體。這可能不需要做圖像替換？

Answer 1

使用唯一CSS完成規範的方法之一是完美地重疊兩個背景圖像，從而創建您所描述的「透明」效果。這是一個小提琴：http://jsfiddle.net/v780v1Ln/。

注意：填充等會改變元素的尺寸並影響必須爲背景圖像設置的座標。

HTML：

<div id = "wrapper"> 
    <h1><span>DRD</span></h1> 
</div> 

CSS：

* { 
    padding: 0; 
    margin: 0; 
} 

html, body { 
    height: 100%; 
    background: #e2e2e2; 
} 

#wrapper { 
    position: absolute; 
    width: 70%; 
    height: 50%; 
    top: 25%; 
    left: 15%; 
    background: url(http://i58.tinypic.com/2vdieso.jpg) 
       no-repeat 
       0 0/500px 362px; 
} 

#wrapper > h1 { 
    background-color: #fff; 
    text-align: center; 
    position: absolute; 
    padding: 0 55px 0 25px; 
    top: 25px; 
    left: 25px; 
} 

#wrapper > h1 > span { 
    font: bold 70px/1 Sans-Serif; 
    text-transform: uppercase; 
    background: url(http://i58.tinypic.com/2vdieso.jpg) 
       no-repeat 
       -45px -25px/500px 362px; 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
}