Градиентные цвета в Internet Explorer - PullRequest
Новая
       34

Градиентные цвета в Internet Explorer

49 голосов
/ 18 октября 2008

Я знаю, что в Internet Explorer есть некоторые проприетарные расширения, так что вы можете делать такие вещи, как создание div с градиентным фоном. Я не могу вспомнить название элемента или его использование. У кого-нибудь есть примеры или ссылки?

Ответы [ 10 ]

83 голосов
/ 18 июня 2010

Код, который я использую для всех градиентов браузера: 

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;

Вам нужно будет указать высоту или zoom: 1, чтобы применить hasLayout к элементу, чтобы это работало в IE.

Обновление:

Вот версия LESS Mixin (CSS) для всех пользователей LESS: 

.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;
}
23 голосов
/ 18 октября 2008

Посмотрите на пользовательские фильтры CSS, которые IE может обрабатывать http://msdn.microsoft.com/en-us/library/ms532847.aspx

11 голосов
/ 28 мая 2010

Стиль filter должен работать для IE8 и IE9. 

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}
7 голосов
/ 20 декабря 2011

Важным моментом, когда дело доходит до градиентов в IE, является то, что хотя вы можете использовать фильтры Microsoft ... 

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

... они уничтожают открытый тип на любом тексте, покрытом градиентом. Учитывая, что цель градиентов обычно состоит в том, чтобы улучшить внешний вид пользовательского интерфейса, для меня это ограничитель показа.

Так что для IE я вместо этого использую повторяющееся фоновое изображение. Если фоновое изображение css сочетается с градиентным CSS для других браузеров (согласно ответу Blowie), другие браузеры будут игнорировать фоновое изображение в пользу градиентного CSS, поэтому оно будет применяться только к IE. 

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

Существует множество сайтов, которые можно использовать для быстрого создания градиентного фона; Я использую это .

6 голосов
/ 27 апреля 2012

Отличный инструмент от Microsoft, позволяет в реальном времени проверять цвета и генерирует CSS для всех браузеров: 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%);
4 голосов
/ 23 марта 2011

Просто подумал, что добавлю эту полезную ссылку: http://css3please.com/

Показывает, как заставить работать градиенты во всех браузерах.

3 голосов
/ 15 июля 2011

Обратите внимание, что IE10 будет поддерживать градиенты следующим образом: 

background: -ms-linear-gradient(#017ac1, #00bcdf);
2 голосов
/ 18 октября 2008

Право ScriptFX.com статья : 

<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>
1 голос
/ 30 июня 2011

Попробуйте это: 

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}
0 голосов
/ 06 мая 2012

Две вещи, которые я обнаружил, борясь с градиентом IE 9.

  1. -ms-filter у меня не сработало. Я должен был просто использовать filter.
  2. Мне пришлось добавить height: 100% в мой класс, чтобы IE использовал градиент.
...