Фоновый градиент изображения не работает с ie9

Question

Фоновый градиент изображения не работает с ie9

0

Кажется, что приведенный ниже код не работает с ie9. Есть ли обходной путь? благодаря

.orangeback {
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF6900), color-stop(1, #FF8214));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FF6900 0%, #FF8214 100%);
}

Greg 01 окт. 2013, в 17:39

Источник

0

возможный дубликат градиентов в Internet Explorer 9
isherwood 01 окт. 2013, в 15:31
1

IE9 не поддерживает градиенты. Вам нужно будет использовать фильтр, но на самом деле спросите себя, наступит ли конец света, если устаревшие браузеры не получат градиенты ... Скорее всего, это не так.
Niet the Dark Absol 01 окт. 2013, в 15:32

Теги:

html

css

2 ответа

1

Пытаться

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/

Дайте мне знать, если это сработает.

user796443 01 окт. 2013, в 14:26

Ещё вопросы

возможный дубликат градиентов в Internet Explorer 9
IE9 не поддерживает градиенты. Вам нужно будет использовать фильтр, но на самом деле спросите себя, наступит ли конец света, если устаревшие браузеры не получат градиенты ... Скорее всего, это не так.

Ennui · Accepted Answer · 2013-10-01T13-09-00.000Z

Это довольно близко:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff6900', endColorstr='#ff8214',GradientType=0 );

Это работает в IE6+.

Или, для JUST IE9, вы можете заменить его SVG, используя следующие стили, если опция filter не плавает на вашей лодке:

Добавить в .orangeback:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjgyMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

Кроме того, добавить .ie9-gradient класса к этим элементам, и добавьте следующее перед закрывающим head тега:

<!--[if gte IE 9]>
  <style type="text/css">
    .ie9-gradient {
       filter: none;
    }
  </style>
<![endif]-->

Чтобы использовать полис для SVG для градиентов CSS3 в IE9, вам необходимо отключить фильтр, поэтому этот код сохраняет резервную копию градиента filter для IE6-8 и использует SVG для IE9.

В вашем случае на самом деле нет необходимости использовать полигон SVG для IE9, потому что вы используете обычный двухцветный линейный градиент. Если у вас был более сложный градиент, второе решение, вероятно, было бы предпочтительнее, но для ваших целей просто использование filter должно работать нормально.

Используйте этот (или препроцессор CSS) и никогда не беспокоитесь о градиентах CSS3: Colorzilla Gradient Generator

Я собирался также предложить Colorzilla. Я пользуюсь этим все время. http://www.colorzilla.com/gradient-editor/