3

Adobe フォーラムのスレッドによると、放射状グラデーションは AIR 3.0 の時点でサポートされていますが、内部の CSS の次の行はどちらもbody{}すべて白で表示されます。

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #088fe0), color-stop(50%, #001193), color-stop(100%, #00025f));

background: -webkit-radial-gradient(center, ellipse cover, #088fe0 0%, #001193 50%, #00025f 100%);

線形グラデーションを正常に使用できます。

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #088fe0), color-stop(100%, #00025f));

ここで何がうまくいかないのですか？

Windows 7 Ultimate SP1 x64 を実行しています。使用時は AIR v3.6.0.6090 adl、コンパイル済みバージョンの実行時は v3.8.0.1430 です。

4

3 に答える 3

-1

すでに述べたように、最新の Chrome では最初のものだけが機能しません (これは古いバージョン用でした)。

ただし、ブラウザー間の互換性を最大限に高めるために、ここにいくつかの宣言を含めることをお勧めします。

グラデーションをサポートしていない古いブラウザでは、デフォルトで単色に設定されています。

background: #088fe0;

ファイアフォックス:

background: -moz-radial-gradient(center, ellipse cover, #088fe0 0%, #001193 50%, #00025f 100%);

Chrome と Safari の古いバージョン (どちらも WebKit エンジンを使用):

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#088fe0), color-stop(50%,#001193), color-stop(100%,#00025f));

Chrome と Safari の新しいバージョン (およびおそらく Opera 15 以降):

background: -webkit-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%);

古い (webkit より前の) Opera:

background: -o-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%);

IE10:

background: -ms-radial-gradient(center, ellipse cover, #088fe0 0%,#001193 50%,#00025f 100%);

古い IE (directx フィルターで利用できる線形グラデーションだけだと思います):

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#088fe0', endColorstr='#00025f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

そして、どのブラウザーが使用すべきか (標準バージョン):

background: radial-gradient(ellipse at center, #088fe0 0%,#001193 50%,#00025f 100%);

これらのオプションをすべて入れると、グラデーションがサポートされている場所ならどこでもグラデーションを取得できるはずです。

于 2013-09-25T12:30:25.853 に答える
-1

フォールバック カラーを設定し、background-image を使用して、Webkit のバージョンがグラデーションをサポートしていないかどうかを確認します。

body {
  background: red; /* fallback */
  background-image: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, #088fe0), color-stop(50%, #001193), color-stop(100%, #00025f));
  background-image: -webkit-radial-gradient(center, ellipse cover, #088fe0 0, #001193 50%, #00025f 100%);
}
于 2013-09-25T11:58:36.353 に答える