CSS3 кросс-браузер линейный градиент

каковы будут альтернативы Opera и IE следующего кода?

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Примечание, Я проверил следующие правила. Все браузеры поддерживают их. Но это вертикальные градиенты. Может ли кто-нибудь помочь мне изменить их на горизонтальные? 

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); 
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF); 
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF); 
background-image:      -o-linear-gradient(top, #0C93C0, #FFF); 
background-image:         linear-gradient(top, #0C93C0, #FFF);
29
cross-browser css css3 linear-gradients

5 ответов

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

все экспериментальные свойства CSS получают префикс:

  • -webkit- для браузеров Webkit (chrome, Safari)
  • -moz- для FireFox
  • -o- для оперы
  • -ms- для Internet Explorer
  • нет префикса для реализации, которая полностью соответствует спецификации.

использовать top right вместо right, если вы хотите другой угол. Использовать left или right если вы хотите горизонтального градиента.

Читайте также:

Internet Explorer

для 

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

filter работает для IE6, IE7 (и IE8), в то время как IE8 рекомендует -ms-filter (значение должно быть указано) вместо filter. Более подробная документация для Microsoft.Gradient можно найти в: http://msdn.microsoft.com/en-us/library/ms532997 (v=против 85).aspx

-ms-filter синтаксис

так как вы поклонник IE, я объясню -ms-filter синтаксис:

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0', /*Start color*/
     endColorStr='#FFFFFF',   /*End color*/
     GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

вместо использования шестнадцатеричного цвета RGB можно также использовать цветовой формат ARGB. A означает Альфа, FF означает непрозрачный, в то время как 00 означает "прозрачный". The GradientType часть необязательна, все выражение не учитывает регистр.

41

вот пример, который работает с Opera, Internet Explorer и многими другими веб-браузерами. Если браузер не поддерживает градиенты, он будет показывать обычный цвет фона.

background: #f2f5f6;
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);

Я украл это из этой сайт. Microsoft построила свой собственный генератор здесь.

11
3

Я получил решение почти для всего!

/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */    background-image:   -webkit-linear-gradient(top, #000000, #FFFFFF);
/* Firefox 3.6+ */                                      background-image:   -moz-linear-gradient(top, #000000, #FFFFFF);
/* IE 7-*/                                                  filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0);
/* IE 8+*/                                                  -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0)";
/* IE 10+ */                                                background-image:   -ms-linear-gradient(top, #000000, #FFFFFF);
/* Opera 11.10+ */                                      background-image:   -o-linear-gradient(top, #000000, #FFFFFF);
/* fallback image                                       background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   #000000;

надеюсь, что это может помочь некоторым людям :).

2

ответ Роба W является всеобъемлющим, в то же время многословным. Поэтому я хотел бы перейти к резюме, поддерживающему текущие браузеры в конце 2014 года, обеспечивая некоторые обратная совместимость в то же время, оставляя только недопустимую возможность IE6 / 7 рендеринга линейного градиента и раннего Webkit (Chrome1-9, Saf4-5 специальным способом (-webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );)

синтаксис стандартов изменил от начального положения градиента до to direction, например background-image: linear-gradient( to bottom, #0C93C0, #FFF );

широко поддерживается, легко читаемый CSS:

background-color: #8BCCE1;                                             /* fallback color (eg. the gradient center color), if gradients not supported; you could also work with an gradient image, but mind the extra HTTP-Request for older browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#0C93C0, EndColorStr=#FFFFFF )"; /* IE8-9, ColorZilla Ultimate CSS Gradient Generator uses SVG bg image for IE9 */

background-image: -webkit-linear-gradient(       top, #0C93C0, #FFF ); /* Chrome10-25, Saf5.1-Saf6, iOS -6.1, Android -4.3 */
background-image:    -moz-linear-gradient(       top, #0C93C0, #FFF ); /* Fx3.6-15 */
background-image:      -o-linear-gradient(       top, #0C93C0, #FFF ); /* Op11.10-12.02 */
background-image:         linear-gradient( to bottom, #0C93C0, #FFF ); /* W3C, Fx16+, Chrome26+, IE10+, Op12.10+, Saf6.1+ */

интересным фактом является то, что большинство сообщений в блоге и инструментов градиента браузера в интернете, таких как f.e. знаменитая Колорзилла"окончательный CSS градиент генератор " включить MS vendor-prefixed -ms-linear-gradient значение.
он поддерживается в Internet Explorer 10 Consumer Preview on. Но когда вы включаете значение стандартов linear-gradient, Выпуск Internet Explorer 10 Предварительный просмотр отображает его соответствующим образом.
Поэтому, включая -ms-linear-gradient и стандартами, с -ms вы на самом деле обращаетесь только к IE10 Consumer Preview, который сводится к никто в вашей аудитории.

2