Colori sfumati in Internet Explorer

StackOverflow https://stackoverflow.com/questions/213750

Domanda

So che Internet Explorer ha alcune estensioni proprietarie in modo da poter fare cose come creare div con uno sfondo sfumato. Non ricordo il nome dell'elemento o il suo utilizzo. Qualcuno ha alcuni esempi o collegamenti?

È stato utile?

Soluzione

Guarda i filtri CSS personalizzati che IE è in grado di gestire http://msdn.microsoft.com/en-us/library/ms532847.aspx

Altri suggerimenti

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 zoom: 1 per applicare hasLayout all'elemento affinché funzioni in IE.

Aggiornamento:

Ecco una versione LESS Mixin (CSS) per tutti gli utenti LESS in circolazione: 

.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 filter dovrebbe funzionare per IE8 e IE9. 

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

Un gotcha significativo quando si tratta di gradienti in IE è che sebbene tu possa usare 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 migliore l'interfaccia utente, questo è un punto fermo 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 (secondo la risposta di Blowsie), altri browser ignoreranno l'immagine di sfondo a favore del gradiente css, quindi finirà per applicarsi solo a IE. 

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

Esistono molti siti che è possibile utilizzare per generare rapidamente uno sfondo sfumato; Uso questo .

Ottimo strumento di Microsoft, ti consente di esaminare i colori 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.

Nota che IE10 supporterà i gradienti come segue: 

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

Direttamente da ScriptFX.com articolo : 

<body bgcolor="#000000" topmargin="0" leftmargin="0">

    <div style="width:100%;height:100%; filter: progid:
        DXImageTransform.Microsoft.Gradient (GradientType=1,
        StartColorStr='#FF006600', EndColorStr='#ff456789')">

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

    </div>
</body>

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 lottavo con il gradiente di IE 9.

  1. Il -ms-filter non ha funzionato per me. Ho dovuto usare semplicemente filter .
  2. Ho dovuto aggiungere height: 100% alla mia classe affinché IE potesse usare il gradiente.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top