HTML/CSS：「透視背景」文本？

Question

好的，這是可能的。

我有一個背景圖片。最重要的是，我有一個內容透明的灰色框。我想在文字頂部有標題，那基本上是這個字母暴露了的背景。因此，文本將刪除灰色框並讓背景顯示。

我能看到的唯一方法就是用背景上的字母透明地創建一個圖像，並使用相同的灰色，然後嘗試以某種方式將其與灰色框對齊。

有沒有另一種 - 更好的方式？

Answer 1

一種方法是使用-webkit-background-clip: text;：demo here（webkit只有很明顯）。

使用位置，我們可以同步兩個背景：

#container, #container h1 { 
    background: url(bg.png) 
} 

#container { 
    position: relative; 
} 

#container #gray { 
    background: rgba(0,0,0,.8); 
    padding-top: 8em; 
} 

#container h1 { 
    font-size: 8em; 
    padding-top: /* padding + border of div */; 
    position: absolute; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
}​ 

或者你可以使用相同的方法和應用svg mask，將在所有現代瀏覽器。