web-dev-qa-db-ja.com

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);
css3cross-browserlinear-gradientscss
33
Tural Ali
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の場合
  • プレフィックスなし、仕様に完全に準拠した実装の場合。

別の角度が必要な場合は、rightの代わりにtop rightを使用します。水平グラデーションが必要な場合は、leftまたはrightを使用します。

こちらもご覧ください：

インターネットエクスプローラ

<IE10の場合、以下を使用する必要があります。

/*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はfilterの代わりに-ms-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部分はオプションであり、式全体は大文字と小文字を区別しません。

43
Rob W

ここでは、Opera、Internet Explorer、および他の多くのWebブラウザーで動作する例を示します。ブラウザがグラデーションをサポートしていない場合、通常の背景色が表示されます。

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%);

this websiteからこれを盗みました。マイクロソフトは独自のジェネレーターを作成しました here 。

11
Robin

ColorzillaのUltimate CSS Gradient Generator を試しましたか？

3
user123444555621

Rob Wの答えは包括的であり、同時に冗長です。したがって、some後方互換性を確保しながら、線形グラデーションと初期のWebkitをレンダリングするIE6/7の無効な機能を除外しながら、2014年末現在のブラウザーをサポートする概要を探したいと思います。 （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+ */
_

興味深い副次的な事実は、ほとんどのブログ投稿とウェブ上のブラウザグラデーションツールです。有名なColorZillaの「 ltimate CSS Gradient Generator 」には、MSベンダープレフィックスの_-ms-linear-gradient_値が含まれます。
Internet Explorer 10 Consumer Preview以降でサポートされています。ただし、標準値_linear-gradient_を含める場合、 Internet Explorer 10リリースプレビュー は適切にレンダリングします。
したがって、_-ms-linear-gradient_と標準の方法を含めることで、_-ms_を使用して、実際にIE10 Consumer Previewのみに対応し、nobodyになりますあなたの聴衆の中で。

2
Volker E.

私はほとんどすべてのソリューションを手に入れました！

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