創建一個透明看透或紋理的字體樣式

Question

是否可以指定一個字體樣式（字體顏色等），而不是使用純色我能：

• 有一個HTML元素在另一個頂部，並使字體透明，所以我可以通過頂部元素切割文本，並通過字母區域查看底部元素的內容？

• 指定文字與圖像（例如/至少不是動畫），所以我可以使用紋理文本，而不是純色？

是否有可能或不使用任何CSS水平/版本，或HTML5，或一些本地的Web瀏覽器規範？

是否有可能至少使用Canvas檢測每個字母的區域，還是應該完全手動完成或在純HTML/HTML5/CSS中不可能？

Answer 1

我認爲你所說的第一個類似於Illustrator中的剪貼蒙版？如果是這樣，那麼background-clip功能描述here on CSS-Tricks然而這只是在webkit瀏覽器中的支持，我不確定IE10，因爲它比其他IE版本有更多的兼容性。

快速谷歌'用CSS圖案文字'已經顯示出this page解釋它。

編輯---------------

對於WebKit瀏覽器是webkit-background-clip和IE9 +，這只是background-clip

Answer 2

如果你想設置透明度文本只需使用：

color: rgba(0, 0, 0, .5); 

在這裏看到更多信息http://www.w3schools.com/cssref/css_colors_legal.asp

我不知道是否有這是一種紋理化字母的不同方式，但是您可以爲文本編寫一個解析器，用於替換帶有圖像文件的字母。

Answer 3

您可以嘗試使用您想要使用的文本創建svg mask，然後使用embed the SVG code directly into the HTML。 這種方法應該適用於大多數現代瀏覽器。