CSS：我可以使用文本作爲蒙版，因此背景圖片僅顯示在文本內部嗎？

我在我的頁面上有一個很好的背景，並且我希望我的文本標題充當一個遮罩來切割其包含的div，並將背景作爲紋理。我可以在CSS中做到這一點，還是我必須打開Photoshop？CSS：我可以使用文本作爲蒙版，因此背景圖片僅顯示在文本內部嗎？

來源

2012-08-12 Alex

您可能需要打開的Photoshop只是向我們展示了最終結果需要的樣子:) – 2012-08-12 18:44:52

有限公司瀏覽器的支持，但background-clip可以讓你這樣的效果：http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/（打更多的樂趣的動畫按鈕）

使用SVG，你可以做這樣的：http://people.opera.com/dstorey/images/newyorkmaskexample.svg（查看源代碼，看看什麼是真正完成，看reference article太）

使用背景圖片，然後CSS，你可以這樣做：http://www.netmagazine.com/tutorials/texturise-web-type-css

來源

2012-08-12 18:48:38

中有一個CSS3屬性background-clip: text，雖然它沒有在每一個瀏覽器。有關更多詳細信息，請參閱here。

來源

2012-08-12 18:49:27 sgress454

由於CSS-技巧顯示在此article，「後面的文本圖像」可以做到這樣：

h1 { 
    color: white; /* Fallback: assume this color ON TOP of image */ 
    background: url(images/fire.jpg) no-repeat; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

但它不能保證所有的瀏覽器工作，所以他們提出一些變通，如modernizr。

這裏是什麼樣子時，它的工作原理是：

What it looks like when it works

來源

2015-03-16 16:22:40 Pureferret

CSS：我可以使用文本作爲蒙版，因此背景圖片僅顯示在文本內部嗎？

回答

相關問題