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

код здесь: http://jsfiddle.net/xEULj/CSS Градиенты в Internet Explorer 8

#rt-header { 
width: 600px; 
z-index: 2; 
position: relative; 

background: -webkit-linear-gradient(left, red, red 40%, green 40%, green); 
background: -moz-linear-gradient(left, red, red 40%, green 40%, green); 
background: -o-linear-gradient(left, red, red 40%, green 40%, green); 
background: -ms-linear-gradient(left, red, red 40%, green 40%, green); 
background: linear-gradient(left, red, red 40%, green 40%, green); 
}

Был ли способ сделать это произойдет в IE еще? Некоторые работы, которые мне еще предстоит найти? Я на самом деле только что узнал, что это не работает в IE10, я думал, что это произойдет, начиная отсюда: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html, но я думаю, нет.

Любые идеи, или мне просто нужно использовать изображение?

источник

2013-08-14 ClaytonDaniels

Вы можете попробовать генератор градиента, например: [colorzilla] (http://www.colorzilla.com/gradient-editor/) – dc5

Используйте SVG как резерв. –

Работает отлично в Chrome ... Я взял код прямо с сайта Microsoft и запустил в нем префикс в Sublime Text ... возможно, что-то произошло, но в Chrome или Firefox он ничего не показывает. – ClaytonDaniels

Вы можете использовать псевдо-элементы, чтобы заполнить данную часть элемента с твердым цветом:

#rt-header { 
    width: 600px; 
    z-index: 2; 
    position: relative; 
    background: green; 
} 

#rt-header:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 40%; 
    height: 100%; 
    background: red; 
    z-index: -1; 
}

EDITED FIDDLE

Должен работать в IE8 (протестировано с netrenderer.com).

источник

2013-08-14 17:10:49

Это работало лучше, чем решение, предоставленное Али. Хотя оба ответа, вероятно, правильны, это фактически привело к желаемому результату в IE8, тогда как Али создал фактический градиент. – ClaytonDaniels

Ниже представлена поддержка IE10 с градиентом, идущим от зеленого до красного.

CHECK THIS DEMO

#rt-header 
     { 
    background: #ff3232; /* Old browsers */ 
    background: -moz-linear-gradient(left, #ff3232 1%, #ff2828 49%, #3fff30 49%, #3fff00 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ff3232), color-stop(49%,#ff2828), color-stop(49%,#3fff30), color-stop(100%,#3fff00)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* IE10+ */ 
    background: linear-gradient(to right, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3232', endColorstr='#3fff00',GradientType=1); /* IE6-9 */ 
     }

источник

2013-08-14 16:56:47 Ali

Это работает! За исключением того, что мне нужна жесткая линия края вниз по центру вместо градиента, так же, как я надеюсь, показал пример jsfiddle (жесткий край между зеленым и красным). – ClaytonDaniels

Да, отличный инструмент! Еще раз спасибо! – ClaytonDaniels

К сожалению, старые фильтры IE не могут создавать жесткие грани между цветами и остановками цвета вообще, они могут создавать только простейшие двухцветные градиенты. Но они поддерживают альфа-прозрачность. Кроме того, генератор цветзиллы также создает избыточную строку '-ms-linear-gradient'. –

Я считаю, что вам может понадобиться использовать для ключевых слов.

попробовать фон: линейный градиент (справа, красный, красный 40%, зеленый 40%, зеленый);

источник

2013-08-14 17:03:15 COBOLdinosaur

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

ответ

Смежные вопросы