Градиентные цвета в Internet Explorer
Я знаю, что Internet Explorer имеет некоторые собственные расширения, так что вы можете делать такие вещи, как создание divs с градиентным фоном. Я не могу вспомнить имя элемента или его использование. У кого-нибудь есть примеры или ссылки?
10 ответов
посмотрите на пользовательские фильтры CSS, которые IE может обрабатывать http://msdn.microsoft.com/en-us/library/ms532847.aspx
код, который я использую для всех градиентов браузера:
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.
обновление:
вот меньше Mixin (CSS) версия для всех вас меньше пользователей там:
.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;
}
на filter
стиль должен работать для IE8 и IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
значительным gotcha, когда дело доходит до градиентов в IE, является то, что, хотя вы можете использовать фильтры Microsoft...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
...они!--5-->убить типа на любом тексте, покрытом градиентом. Учитывая, что цель градиентов обычно состоит в том, чтобы сделать пользовательский интерфейс лучше, это шоу-пробка для меня.
поэтому для IE я использую повторяющееся фоновое изображение. Если CSS фонового изображения сочетается с CSS градиента для других браузеров (согласно Blowsie ответ), другие браузеры будут игнорировать фоновое изображение в пользу градиентного css, поэтому он будет применяться только к IE.
background-image: url('/Content/Images/button-gradient.png');
есть много сайтов, которые можно использовать для быстрого создания градиентного фона; я использую этой.
отличный инструмент от 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%);
просто подумал, что я добавлю эту полезную ссылку:http://css3please.com/
показывает, как получить градиенты, работающие во всех браузерах.
обратите внимание, что IE10 будет поддерживать градиенты следующим образом:
background: -ms-linear-gradient(#017ac1, #00bcdf);
справа от 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>
попробуйте это:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
две вещи, которые я обнаружил, борясь с градиентом IE 9.
- на
-ms-filter
не работает для меня. Я должен был использовать простоfilter
. - мне пришлось добавить
height: 100%
в мой класс для IE, чтобы использовать градиент.