Come implementare Cross Browser Opacity Gradient (Non sfumatura di colore)

Come si può implementare il gradiente di opacità cross browser (non il gradiente di colore)? Vedi seguente codice:
Come implementare Cross Browser Opacity Gradient (Non sfumatura di colore)

<div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div>

Funziona bene in IE, ma non in altri browser come Firefox, safari..etc. Qual è la sintassi equivalente per firefox? Per favore non suggerirmi di usare l'immagine del gradiente.

fonte

2010-04-16 Brij

C'è -moz-linear-gradient per le versioni di Firefox recenti e per i browser WebKit. La trasparenza per questi due dovrebbe essere possibile utilizzando i colori rgba.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://developer.apple.com/safari/library/documentation/...

L'unica soluzione compatibile con tutti i browser 100% reale è un'immagine però.

fonte

2010-04-16 05:55:54 deceze

Questa risposta non è corretta per la domanda. Non sembra essere equivalente al filtro di IE antico: alpha start/finish per mozilla o gecko via CSS. – PlayGod

Ho cercato di capire come ottenere un'immagine con un'opacità di sfumatura lineare orizzontale, in modo che il gradiente verticale di una precedente div sia visibile. Questo perché nella mia app, l'utente caricherà l'immagine che richiede il gradiente di opacità, quindi la soluzione deve essere pura css/js. – PlayGod

Funzionerà con IE, ma apprently non è possibile applicare un gradiente di opacità lineare a uno sfondo di immagine. moz e gecko creano effettivamente un'immagine quando si utilizza il gradiente lineare rgba e il gradiente può apparentemente andare solo in una direzione. Per ottenere l'effetto desiderato, è necessario specificare la sfumatura direzionale per l'opacità e un altro gradiente direzionale per il gradiente di colore. – PlayGod

Grazie @deceze,

sto scrivendo campione css per le altre persone che hanno lo stesso requisito

top:0px; 
    opacity: 0.6;  
    width: 1944px; 
    height: 896px; 
    position: absolute; 
    z-index: 500; 
background-color:#dcdcdc; 
     /* For WebKit (Safari, Google Chrome etc) */ 
     background: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(rgba(215,212,207,0))); 
     /* For Mozilla/Gecko (Firefox etc) */ 
     background: -moz-linear-gradient(top, #dcdcdc, rgba(215,212,207,0)); 
     /* For Internet Explorer 5.5 - 7 */ 
     filter:alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696); 
     /* For Internet Explorer 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696)";

fonte

2010-04-22 05:20:24 Brij

Come implementare Cross Browser Opacity Gradient (Non sfumatura di colore)

risposta

Problemi correlati