CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラデーション「イメージ」を作成します。これはCSS3の構文であり、少なくともIE10と互換性があります。

背景画像: 線形グラデーション(右、#ff9000、#ff5000);

direction: グラデーションの方向を指定するために使用されます。角度値 (deg、rad、grad、または turn で使用可能) または方向キーワード (top、right、bottom、left、left top、top right、bottom right、または left bottom) を受け入れることができます。

color-start、color-end: それぞれ開始色と終了色を示します

これは Taobao のナビゲーション バーの例であり、グラデーション カラーは次のように実装されています。

背景画像: 線形グラデーション(右、#ff9000、#ff5000);

ただし、linear-gradient() は少なくとも IE10 と互換性があります。IE8 および IE9 と互換性を持たせるには、次のように filter のみを使用できます。

背景画像: 線形グラデーション(右、#ff9000、#ff5000);
フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', 
endColorstr='#ffff5000', GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', 
endColorstr='#ffff5000', GradientType=1);

フィルターを使用してグラデーションを実現する場合、色の値は省略形 (#000 など) で入力できず、完全な形で記述する必要があることに注意する必要があります。#000 と #000000 の違いを見てみましょう。

#000のとき

フィルター:progid:DXImageTransform.Microsoft.gradient
(開始色str='#000',
 endColorstr='#ffff5000', 
グラデーションタイプ=1)
;

実行結果:

#000000の場合

フィルター:progid:
DXImageTransform.Microsoft.グラデーション
(開始色str='#000000', 
endColorstr='#ffff5000', GradientType=1);

実行結果:

次に、フィルターの値を分析してみましょう。

注意深い友人は、フィルターの startColorstr と endColorstr の色値にさらに 2 つの ff があることに気付くでしょう。実際、startColorstr と endColorstr は単に色を表すのではありません。それらの形式は #AARRGGBB である必要があります。 AA、RR、GG、BB は正の 16 進整数です。値の範囲は 00 - FF です。 RR は赤の値、GG は緑の値、BB は青の値を指定します。 AA は透明性を指定します。 00は完全に透明です。 FFは完全に不透明です。範囲外の値はデフォルト値に復元されます。値の範囲は #FF000000 - #FFFFFFFF です。 AA は、前に学習した rgba() の a に似ており、どちらも透明度を設定するために使用されます。

GradientType=1 は方向を示し、1 は水平方向を示し、0 は垂直方向を示します。

CSS3 でのグラデーション背景実装の互換性問題についての記事はこれで終わりです。CSS3 グラデーション背景に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。