使用CSS在文本上應用圖像蒙版

我希望使用重複圖像矇蔽大小爲4.5em的某個錨文本，以便圖像只顯示文本所在的區域。有什麼辦法可以用CSS來做到這一點？如有可能，請提供相關的代碼和示例幫助。謝謝。 :)使用CSS在文本上應用圖像蒙版

2011-09-06 ikartik90

尋求思路而不是代碼，並告訴我們你到目前爲止做了什麼 – Mahesh

@mahesh：我不是指確切的代碼，我的意思是像一個例子的兄弟 – ikartik90

不知道你爲什麼得到了投票，似乎是一個合法的問題給我。可能會更具描述性。

無論如何，我認爲你不是運氣不好！在CSS中唯一可行的方法是使用image-mask屬性。這很簡單，但目前瀏覽器支持很差。認爲它在Firefox，Opera和谷歌瀏覽器中效果很好。目前沒有IE支持。以下是它的使用方法：

p{ 
    -webkit-mask-image: url(/path/to/mask.png); 
    -o-mask-image: url(/path/to/mask.png); 
    -moz-mask-image: url(/path/to/mask.png); 
    mask-image: url(/path/to/mask.png); 
}

這將掩蓋每個段落的圖像路徑。幸運的是，它在IE中很好地降級，所以用戶甚至不會注意到任何錯誤，它會顯示爲正常文本！所以如果你沒有REALLY需要IE的支持，那就這樣做。如果您確實需要IE支持：

使用圖像。在Photoshop中製作。 :(

下面是它如何使用的演示：

http://trentwalton.com/2011/05/19/mask-image-text/

來源

2011-09-06 07:30:02 alt

我試過使用它，但它不是看起來工作該圖像只需在文本上方顯示文本。這並沒有發生。 :( – ikartik90

是的，這就是mask-image所做的事情，究竟發生了什麼？它的工作原理，相信我，有些事情是錯誤的，請檢查我鏈接到的網站，使用瀏覽器的元素檢查器來查明你在做什麼，而不是反之亦然 – alt

我剛剛意識到問題出在與Firefox的某些兼容性問題上（儘管我已經有最新版本），這個面具在Chrome上運行良好，謝謝:) – ikartik90

他們不順心的mask-image酒店外的WebKit，但是此刻的你可以通過"filter" in IE模擬，並通過SVG in Firefox（/Opera?/WebKit?/IE?）

來源

2012-03-01 16:46:22

使用CSS在文本上應用圖像蒙版

回答

相關問題