Come posso creare una maschera con supporto cross-browser?

So come fare una maschera in css, ma solo chrome e safari supportano questo. C'è qualche sostituzione per questo? forse plugin jquery o qualcosa del genere?Come posso creare una maschera con supporto cross-browser?

Ecco il mio codice:

<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>

voglio rendere cross-browser supportato.

Grazie, e mi dispiace per il mio inglese ...

fonte

2013-05-30 HtmHell

Ho avuto un problema simile e dopo alcune ricerche sono venuto su con una soluzione di SVG. Questo supporta Firefox, Chrome, IE v9 e IE v10. IE v9 e precedenti hanno il supporto per SVG di base, masking e clipping qui ci sono alcuni esempi dal sito microsoft.

per IE8: Ho usato il filtro chroma key, come indicato in questo tutorial: http://thenittygritty.co/css-masking

Ecco quello che ho fatto:

fatto la forma della maschera desiderata come mask.png e applicata in in cima al sample.jpg usando SVN mascherare come di seguito:

<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>

ho messo un JSFiddle qui sulla stessa: http://jsfiddle.net/giri_jeedigunta/Z2J34/

mobile di sostegno: Questo ha funzionato perfettamente bene su iPhone, iPad, Chrome su telefoni Android, ma il browser nativo sul Samsung S3 non rendere questo codice.

Anche se la maggior parte delle risorse online come caniuse ha affermato che esiste un supporto per Android, non è riuscito a eseguire il rendering sul browser nativo.

fonte

2013-12-29 14:05:42

Ottima risposta :) –

questo tipo funziona per me ma ho dovuto creare una maschera per ogni punto di interruzione per renderlo reattivo selezionando ognuno con una query multimediale in css. Non riesco a farlo riempire il suo contenitore però. – v3nt

hai qualche soluzione per il browser nativo Android? Lo sto cercando ma non ho trovato alcuna soluzione –

Come posso creare una maschera con supporto cross-browser?

risposta

Problemi correlati