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

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


html gradient css background internet-explorer
person Jeremy    schedule 17.10.2008    source источник
comment
Я полагаю, что вы ищете эту конкретную настройку CSS.   -  person tsilb    schedule 18.10.2008
comment
Одно маленькое замечание: я обнаружил небольшую ошибку при работе с IE9. Если вы не укажете весь цвет HEX, он не будет работать правильно. т. е. #cccccc НЕ #ccc Надеюсь, это поможет.   -  person    schedule 14.10.2011
comment
Будьте осторожны с применением градиентов к строкам таблицы. IE, похоже, обрабатывает их по-разному, поэтому, чтобы заставить работать любое из других решений этого вопроса, вам нужно обернуть содержимое tr в div и применить к нему градиент.   -  person Keith    schedule 01.03.2012
comment
В дополнение к @mdostudio вы даже можете использовать #FFFFFFFF (8 символов), где первые два определяют прозрачность. От полностью прозрачного (FF) до сплошного цвета (00).   -  person Neograph734    schedule 14.12.2012
comment
@ user995849: это не ошибка. filter: progid:DXImageTransform.Microsoft.gradient-API просто не принимает сокращенные значения цвета CSS. Я написал полное пояснение здесь: Почему значения трехзначного шестнадцатеричного кода интерпретируются по-разному в Internet EXPLORER? . У этого API также есть еще один «сюрприз»: его полный формат (включая альфа-версию) на самом деле aarrggbb, а НЕ rrggbbaa.   -  person GitaarLAB    schedule 28.08.2015

Ответы (11)


arrow_upward
23
arrow_downward

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

person Nick    schedule 17.10.2008

arrow_upward
83
arrow_downward

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

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;
}
person Blowsie    schedule 18.06.2010
comment
Идеальный фрагмент для градиентов. Zoom: 1 является ключом к ответу на этот вопрос. - person Voltin; 16.05.2011
comment
@Blowsie У меня проблемы с градиентами при использовании в сочетании с радиусом границы. В том, что фон эффективно сглаживает углы. Очевидно, что в зависимости от выбранного цветового диапазона фон заполняет углы. Есть ли способ обработки радиуса границы и градиента фона в IE? - person codepuppy; 22.11.2012
comment
@codepuppy Это известная ошибка, решения которой нет, большие фреймворки, такие как bootstrap, выбрали радиус границы без градиента. - person Blowsie; 22.11.2012
comment
@codepuppy, по-видимому, есть способ использовать радиус границы и градиенты в IE. stackoverflow.com/a/7544248/1446845 - person Aurelio; 14.02.2013

arrow_upward
11
arrow_downward

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

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

arrow_upward
7
arrow_downward

Существенная ошибка, когда дело доходит до градиентов в IE, заключается в том, что, хотя вы можете использовать фильтры Microsoft...

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

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

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

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

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

person Jonathan Moffatt    schedule 20.12.2011

arrow_upward
6
arrow_downward

Отличный инструмент от 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%);
person thezar    schedule 27.04.2012

arrow_upward
4
arrow_downward

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

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

person Sniffer    schedule 23.03.2011

arrow_upward
3
arrow_downward

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

background: -ms-linear-gradient(#017ac1, #00bcdf);
person TimKola    schedule 15.07.2011

arrow_upward
2
arrow_downward

Прямо из статьи на 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>
person vmarquez    schedule 17.10.2008

arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

  1. -ms-filter у меня не сработало. Мне пришлось использовать просто filter.
  2. Мне пришлось добавить height: 100% в мой класс, чтобы IE мог использовать градиент.
person Vincent    schedule 06.05.2012
comment
вы можете проверить CSS3Pie, который представляет собой скрипт для IE, добавляющий поддержку некоторых функций CSS, включая градиенты. Это работает и в IE9. - person Spudley; 07.05.2012

arrow_upward
0
arrow_downward

В моем случае я вставил его в раздел заголовка

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

затем в разделе стилей вставьте его

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;
person AbdusSalam    schedule 13.10.2020