Цвета градиента в Internet Explorer
Я знаю, что у Internet Explorer есть некоторые проприетарные расширения, так что вы можете делать такие вещи, как создание div с градиентным фоном. Я не могу вспомнить название элемента или его использование. У кого-нибудь есть примеры или ссылки?
Будьте осторожны, применяя градиенты к строкам таблицы. IE, похоже, относится к этим по-разному, поэтому, чтобы заставить любое из других решений этого вопроса работать, вам нужно обернуть свой tr-контент в div и применить к нему градиент.
Я полагаю, вы ищете этот конкретный параметр CSS.
В дополнение к @mdostudio вы даже можете использовать #FFFFFFFF (8 символов), где первые два определяют прозрачность. От полностью прозрачного (FF) до однотонного (00).
@ user995849: это не ошибка. filter: progid:DXImageTransform.Microsoft.gradient-API просто не принимает сокращенные цветовые значения CSS. Я написал здесь полное объяснение: Почему значения трехзначного шестнадцатеричного цветового кода по-разному интерпретируются в Internet EXPLORER?. У этого API есть еще один «сюрприз»: его полный формат (включая альфа-версию) на самом деле aarrggbb, а НЕ rrggbbaa.
Ответы 11
Посмотрите на настраиваемые фильтры CSS, которые может обрабатывать IE http://msdn.microsoft.com/en-us/library/ms532847.aspx
Прямо с 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>
Стиль filter должен работать в IE8 и IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
Код, который я использую для всех градиентов браузера:
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;
}
Идеальный сниппет для градиентов. Zoom: 1 - это ключ к ответу на этот вопрос.
@Blowsie У меня проблемы с градиентами при использовании в сочетании с радиусом границы. В этом случае фон эффективно скругляет углы. Очевидно, что в зависимости от выбранного цветового диапазона фон заполняет углы. Есть ли уловка для обработки радиуса границы и градиента фона в IE?
@codepuppy Это известная ошибка, не имеющая решения, большие фреймворки, такие как bootstrap, выбрали border-radius без градиента.
@codepuppy, по-видимому, есть способ использовать градиенты border-radius И в IE. stackoverflow.com/a/7544248/1446845
Просто подумал, что добавлю эту полезную ссылку: http://css3please.com/
Показывает, как заставить градиенты работать во всех браузерах.
Попробуй это:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
Обратите внимание, что IE10 будет поддерживать следующие градиенты:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Когда дело доходит до градиентов в IE, важно то, что, хотя вы можете использовать фильтры Microsoft ...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
... они убить чистый тип на любом тексте, покрытом градиентом. Учитывая, что цель градиентов обычно состоит в том, чтобы сделать пользовательский интерфейс лучше, для меня это препятствие.
Поэтому для 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%);
Две вещи, которые я обнаружил, борясь с градиентом IE 9.
-ms-filterу меня не работал. Пришлось использовать простоfilter.- Мне пришлось добавить
height: 100%в свой класс, чтобы IE использовал градиент.
вы можете попробовать CSS3Pie, который представляет собой сценарий для IE, чтобы добавить поддержку некоторых функций CSS, включая градиенты. Он также работает в IE9.
В моем случае я вставил его в раздел заголовка
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
затем в разделе стиля вставьте его
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;
Одно небольшое примечание: я обнаружил небольшую ошибку при работе с IE9. Если вы не укажете весь цвет HEX, он не будет работать правильно. т.е. #cccccc НЕ #ccc Надеюсь, это поможет.