Kolory gradientu w Internet Explorerze

Wiem, że Internet Explorer ma pewne własnościowe rozszerzenia, dzięki którym można tworzyć divy z gradientowym tłem. Nie pamiętam nazwy elementu ani jego użycia. Czy ktoś ma jakieś przykłady lub linki?

Author: Blowsie, 2008-10-18
Source

10 answers

Spójrz na niestandardowe filtry CSS, które IE może obsługiwać http://msdn.microsoft.com/en-us/library/ms532847.aspx

 23
Author: Nick,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-17 20:37:26

Kod, którego używam dla wszystkich gradientów przeglądarki: 

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;

Będziesz musiał podać wysokość lub zoom: 1 Aby zastosować hasLayout do elementu, aby to działało w IE.

Update:

Oto wersja mniej Mixin (CSS) dla wszystkich mniej użytkowników tam: 

.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;
}
 84
Author: Blowsie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-27 08:29:28

Styl filter powinien działać dla IE8 i IE9.

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}
 11
Author: James Lawruk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-23 00:37:19

Znaczącym aspektem jeśli chodzi o gradienty w IE jest to, że chociaż można używać filtrów Microsoftu...

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

...one zabijają czysty typ na dowolnym tekście objętym gradientem. Biorąc pod uwagę, że celem gradientów jest zwykle poprawa wyglądu interfejsu, jest to dla mnie korek pokazowy.

Więc dla IE zamiast tego używam powtarzającego się obrazu tła. Jeśli obrazek tła css jest połączony z gradientowym CSS dla innych przeglądarek( zgodnie z odpowiedzią Blowsie ' ego), inne przeglądarki zignoruje obraz tła na rzecz gradientowego css, więc skończy się to tylko na IE.

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

Istnieje wiele stron, których możesz użyć do szybkiego wygenerowania gradientowego tła; ja używam tego .

 7
Author: Jonathan Moffatt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-20 01:01:12

Świetne narzędzie firmy Microsoft, pozwala badać kolory w czasie rzeczywistym i generuje CSS dla wszystkich przeglądarek: 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%);
 6
Author: thezar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-23 20:31:29

Pomyślałem, że dodam ten przydatny link: http://css3please.com/

Pokazuje jak uruchomić gradienty we wszystkich przeglądarkach.

 4
Author: Sniffer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-23 11:04:13

Zauważ, że IE10 będzie obsługiwał gradienty w następujący sposób: 

background: -ms-linear-gradient(#017ac1, #00bcdf);
 3
Author: TimKola,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-23 20:30:07

Prawo od ScriptFX.com Artykuł : 

<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>
 2
Author: vmarquez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-17 20:40:19

Spróbuj tego: 

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}
 1
Author: Ry-,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-23 20:34:32

Dwie rzeczy odkryłem zmagając się z gradientem IE 9.

  1. -ms-filter nie zadziałało dla mnie. Musiałem użyć po prostu filter.
  2. musiałem dodać height: 100% do mojej klasy, aby IE korzystało z gradientu.
 0
Author: Vincent,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-23 20:45:47