在物理文本上使用背景圖像/紋理？

Question

我已經看到它在SVG中完成了：文本填充是圖像而不是顏色;我一直在想，如果這樣的事情可以使用CSS3。

我看各地的網絡，並且迄今僅發現基本都是在文本覆蓋的圖像解決方法（見this，這不是一個可行的選擇對我來說）。除了實際上有一個背景圖像的文字，是否有可能有一個背景漸變？

Answer 1

CSS3增加了background-clip屬性。實際上，您可以使用-webkit-background-clip: text來執行此操作，但text值是專有的，而當前的僅在基於Webkit的瀏覽器（Safari和Chrome）中實現。

h1 { 
    font-size: 3em; 
    background: url('someimage.png'); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

使用-webkit-background-clip: text;幾篇文章：

• Gradient Text
• Animated background clip text
• Fun with -webkit-background-clip and @font-face

Answer 2

如果我明白你在說什麼，沒有。您只能將文本設置爲純色，即使使用CSS3的神奇奇景。