CSS3 кросс-браузерный линейный градиент - PullRequest
Новая
       27

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

31 голосов
/ 25 сентября 2011

Какими будут варианты 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);

Ответы [ 5 ]

42 голосов
/ 25 сентября 2011 
background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

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

  • -webkit- для браузеров Webkit (Chrome, Safari)
  • -moz- для FireFox
  • -o- для Opera
  • -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=vs.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 HEX вы также можете использовать цветовой формат ARGB. A означает альфа, FF означает непрозрачный, а 00 означает прозрачный. Часть GradientType является необязательной, все выражение чувствительно к регистру.

11 голосов
/ 25 сентября 2011

Вот пример, который работает с 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 создала собственный генератор здесь .

3 голосов
/ 25 сентября 2011
2 голосов
/ 28 октября 2014

Ответ Роба В. является исчерпывающим и в то же время многословным. Поэтому я хотел бы перейти к обзору, поддерживающему текущие браузеры, к концу 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+ */

Интересным побочным фактом является то, что большинство публикаций в блогах и браузерные инструменты градиента в Интернете, например, например, e.e. Известный ColorZilla " Ultimate CSS Gradient Generator " включает значение -ms-linear-gradient с префиксом поставщика MS.
Поддерживается в Internet Explorer 10 Consumer Preview. Но когда вы включаете стандартное значение linear-gradient, Internet Explorer 10 Release Preview отображает его соответствующим образом.
Таким образом, включив -ms-linear-gradient и стандартный способ, с -ms вы фактически обращаетесь только к IE10 Consumer Preview, что сводится к nobody в вашей аудитории.

2 голосов
/ 15 апреля 2013

у меня есть решение практически для всего! 

/* 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;

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

...