如何製作跨瀏覽器支持的面具？

我知道如何在CSS中做一個遮罩，但只有鉻和safari支持這個。有沒有替代品？也許jquery插件或東西？如何製作跨瀏覽器支持的面具？

這裏是我的代碼：

<div class="character"> 
    <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png"> 
    <div class="green-mask"></div> 
</div> 
<style> 
.green-mask { 
    display: block; 
    height: 200px; 
    width: 508px; 
    background: rgb(160, 255, 97); 
    opacity: .3; 
    position: absolute; 
    top: 0; 
    -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png); 
} 
</style>

我想讓它跨瀏覽器的支持。

謝謝，我的英語對不起......

來源

2013-05-30 HtmHell

我也有類似的問題，我想出了一個解決方案SVG經過一番研究。這支持Firefox，Chrome，IE v9和IE v10。 IE v9及以上版本支持基本的SVG，屏蔽和裁剪，下面是微軟網站的一些例子。

對於IE8：我已經使用了色度鍵過濾器在本教程中提到的：http://thenittygritty.co/css-masking

這裏是我做過什麼：

製造所需要的掩形狀mask.png和應用在使用SVN的sample.jpg的上掩膜象下面這樣：

<div class="svgMask"> 
     <svg width="400" height="300" baseProfile="full" version="1.2"> 
      <defs> 
       <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)"> 
        <image width="100%" height="100%" xlink:href="mask.png"/> 
       </mask> 
      </defs> 
      <image mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="sample.jpg"/> 
     </svg> 
    </div>

我已經把這裏的jsfiddle上是相同的：http://jsfiddle.net/giri_jeedigunta/Z2J34/

移動支持：這工作完全正常在iPhone，iPad，Android版Chrome的手機，但對三星S3的原生瀏覽器沒有呈現該代碼。

儘管像caniuse這樣的大多數在線資源都表示支持android，但它無法在本機瀏覽器上呈現。

來源

2013-12-29 14:05:42

很好的回答:) –

這種有點適合我，但我不得不爲每個斷點創建一個掩碼，以使它響應，在CSS中使用媒體查詢來選擇每個斷點。儘管如此，我無法讓它填滿它的容器。 – v3nt

你有任何解決方案的Android本地瀏覽器？我正在尋找它，但沒有得到任何解決方案 –

如何製作跨瀏覽器支持的面具？

回答

相關問題