37

次のコードの 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);
4

5 に答える 5

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

実験的な CSS プロパティはすべてプレフィックスを取得しています。

  • -webkit-Webkit ブラウザー (chrome、Safari) 用
  • -moz-ファイアフォックス用
  • -o-オペラ用
  • -ms-Internet Explorer の場合
  • 仕様に完全に準拠している実装の接頭辞はありません。

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

以下も参照してください。

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

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-ms-filterでは の代わりに (値を引用する必要があります) を推奨していますfilter。の詳細なドキュメントは、http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx にありMicrosoft.Gradientます。

-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部分はオプションで、式全体で大文字と小文字が区別されません。

于 2011-09-25T15:55:33.017 に答える
11

これは、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%);

このウェブサイトからこれを盗みました。Microsoft は独自のジェネレータをここに構築しました。

于 2011-09-25T15:58:25.750 に答える
4

Rob 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 directionbackground-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 の「Ultimate CSS Gradient Generator」など、Web 上のほとんどのブログ投稿やブラウザー グラデーション ツールには、MS ベンダー プレフィックス-ms-linear-gradient値が含まれています。
Internet Explorer 10 Consumer Preview 以降でサポートされています。ただし、標準値を含める場合linear-gradient、Internet Explorer 10 Release Previewはそれを適切にレンダリングします。
したがって-ms-linear-gradient、標準的な方法で含めることにより、-ms実際には IE10 コンシューマー プレビューのみに対処していることになります。

于 2014-10-27T21:59:14.580 に答える
3

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

于 2011-09-25T16:17:19.147 に答える
2

私はほとんどすべての解決策を得ました！

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

これが一部の人々に役立つことを願っています:)。

于 2013-04-15T10:46:50.163 に答える