Colori sfumati in Internet Explorer

So che Internet Explorer ha alcune estensioni proprietarie in modo che tu possa fare cose come creare div con uno sfondo sfumato. Non riesco a ricordare il nome dell’elemento o il suo utilizzo. Qualcuno ha qualche esempio o link?

Guarda i filtri CSS personalizzati IE può gestire http://msdn.microsoft.com/en-us/library/ms532847.aspx

Il codice che uso per tutti i gradienti del browser:

 background: #0A284B; background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); background: -webkit-linear-gradient(#0A284B, #135887); background: -moz-linear-gradient(top, #0A284B, #135887); background: -ms-linear-gradient(#0A284B, #135887); background: -o-linear-gradient(#0A284B, #135887); background: linear-gradient(#0A284B, #135887); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); zoom: 1; 

Dovrai specificare un’altezza o uno zoom: 1 per applicare hasLayout all’elemento affinché questo funzioni in IE.


Aggiornare:

Ecco una versione di LESS Mixin (CSS) per tutti gli utenti MENO là fuori:

 .gradient(@start, @end) { background: mix(@start, @end, 50%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")"; background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); background: -webkit-linear-gradient(@start, @end); background: -moz-linear-gradient(top, @start, @end); background: -ms-linear-gradient(@start, @end); background: -o-linear-gradient(@start, @end); background: linear-gradient(@start, @end); zoom: 1; } 

Lo stile del filter dovrebbe funzionare per IE8 e IE9.

 .gradientClass { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); } 

Un trucchetto significativo quando si parla di gradienti in IE è che, sebbene sia ansible utilizzare i filtri di Microsoft …

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE'); zoom:1; 

uccidono il tipo chiaro su qualsiasi testo coperto dal gradiente. Dato che lo scopo dei gradienti è normalmente quello di rendere l’interfaccia utente migliore, questo è uno stopper per me.

Quindi per IE uso invece un’immagine di sfondo ripetuta. Se l’immagine di sfondo css è combinata con il gradiente CSS per altri browser (come per la risposta di Blowsie), altri browser ignoreranno l’immagine di sfondo a favore del css di gradiente, quindi finirà per essere applicata a IE.

 background-image: url('/Content/Images/button-gradient.png'); 

Ci sono molti siti che puoi usare per generare rapidamente uno sfondo sfumato; Io uso questo .

Ottimo strumento di Microsoft, consente di esaminare i colors in tempo reale e genera CSS per tutti i browser: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

 /* IE10 */ background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Opera */ background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Proposed W3C Markup */ background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); 

Ho pensato di aggiungere questo link utile: http://css3please.com/

Mostra come far funzionare i gradienti in tutti i browser.

Notare che IE10 supporterà i gradienti come segue:

 background: -ms-linear-gradient(#017ac1, #00bcdf); 

Direttamente dall’articolo ScriptFX.com:

  
Your page content goes in here ...... at the end of all the page content, you must close the
tag, immediately before the closing tag.... as below

Prova questo:

 .red { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */ height: 0; /* gain layout IE5+ */ zoom: 1; /* gain layout IE7+ */ } 

Due cose che ho scoperto mentre ero in difficoltà con il gradiente IE 9.

  1. Il -ms-filter non ha funzionato per me. Ho dovuto usare semplicemente il filter .
  2. Ho dovuto aggiungere height: 100% alla mia class per IE per usare il gradiente.