cores do gradiente no Internet Explorer
-
03-07-2019 - |
Pergunta
Eu sei que o Internet Explorer tem algumas extensões proprietárias para que você possa fazer coisas como criar divs com um fundo gradiente. Não me lembro o nome do elemento ou do uso. Alguém tem alguns exemplos ou links?
Solução
Observe a CSS de filtros personalizados IE pode lidar com http://msdn.microsoft.com/en-us/library/ms532847.aspx
Outras dicas
O código que eu uso para todos os gradientes de navegador:
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;
Você precisará especificar uma altura ou zoom: 1
aplicar hasLayout
ao elemento para que isso funcione no IE.
Update:
Aqui está uma versão menos Mixin (CSS) para todos os usuários menos lá fora:
.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;
}
O estilo filter
deve trabalhar para o IE8 e IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
A pegadinha significativa quando se trata de gradientes em IE é que, embora você pode usar filtros da Microsoft ...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
... eles matar Tipo clara em qualquer texto abrangido pelo gradiente. Dado que o objetivo de gradientes é normalmente para fazer o olhar UI melhor, que é um show rolha para mim.
Assim, para IE eu usar uma imagem de fundo repetindo vez. Se o css imagem de fundo é combinado com o CSS inclinação para outros navegadores (como por resposta de Blowsie), outros navegadores irão ignorar a imagem de fundo em favor do css gradiente, por isso só vai acabar aplicando a IE.
background-image: url('/Content/Images/button-gradient.png');
Há uma abundância de sites que você pode usar para gerar rapidamente um fundo gradiente; Eu uso este .
A grande ferramenta da Microsoft, permite que você examine cores em tempo real e gera CSS para todos os navegadores: 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%);
Apenas pensei em adicionar este link útil: http://css3please.com/
mostra como obter gradientes de trabalho em todos os navegadores.
Note que IE10 apoiará gradientes da seguinte forma:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Desde ScriptFX.com artigo :
<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>
Tente isto:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
Duas coisas que eu descobri enquanto lutava com o IE 9 gradiente.
- O
-ms-filter
não funcionou para mim. Eu tive que usar simplesmentefilter
. - eu tive que adicionar
height: 100%
a minha classe para o IE para usar o gradiente.