IE9+と互換性のあるCSS3グラデーション背景色の使用方法

背景色は、単色に加えて、さまざまな色の組み合わせを使用してグラデーションの背景色を作成し、ページを豊かにすることもできます。

グラデーションの背景は 2 つのタイプに分けられます:

1. 線形グラデーション、

2. 線形グラデーション

の 3 つのタイプに分けられます。そして斜めgradients Gradient

構文

:

= Linear-gradient([ [ | to ] ,]? [, ]+)<サイドまたはコーナー>

= [上 | 下]

<カラーストップ>

= < ; color> [ ]?

: グラデーションの方向を指定します。

to left: 右から左へのグラデーションを設定します。

to right: 左から右へのグラデーションを設定します。

tobottom: 上から下へのグラデーションを設定します

: 指定したグラデーションの開始色と終了色を設定します

: 色を指定します

: 長さの値を使用して開始カラー位置と終了カラー位置を指定します。負の値は許可されません

: 開始色の位置と終了色の位置を指定するには、パーセントを使用します。

background: Linear-gradient (パラメータ 1、パラメータ 2、パラメータ 3、パラメータ 4...パラメータ N)

パラメータ 1: 記入するかどうかを記述します。方向は次のとおりです。 to right、つまり、グラデーションの方向は左から右です。未入力の場合、グラデーションはデフォルトで上から下に設定されます。 パラメータ 1': 基本的にパラメータ 1 と同じで、-webkit-、-moz-、-o- プレフィックスの場合に記述されます。例: left は、グラデーション方向の開始位置を表します

パラメータ 2: グラデーションの開始color、rgba は () 内に入力するか、#fff または白の後に、色の割合を表すパーセンテージを続けます。たとえば、#fff 50% は白の 50% を表します。 パラメータ 3: 後にパラメータがない場合、それはグラデーションの終了色であり、オプションのパラメータ 2 属性と一致します。

パラメータ4....パラメータN: 追加可能なグラデーションカラーノード。最後の色はグラデーションの終了色です

例

:

linear-gradient(#fff, #75aaa3);
 linear-gradient(to bottom, #fff,#75aaa3); 
linear-gradient(to top, #75aaa3, #fff); 
linear-gradient(180deg, #fff, #75aaa3); 
linear-gradient(to bottom, #fff 0%, #75aaa3 100%);

ただし、互換性のあるブラウザも必要です:

//从下至上
#text.btt{
background: -webkit-linear-gradient(bottom,#fff, #75aaa2);
background: -o-linear-gradient(bottom,#fff, #75aaa2);
background: -moz-linear-gradient(bottom,#fff, #75aaa2);
background: linear-gradient(to top,#fff, #75aaa2); /* 标准的语法（必须放在最后） */
}

//带透明度
#text.opac{
background: -webkit-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: -o-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: -moz-linear-gradient(rgba(256,256,256,0), #75aaa2);
background: linear-gradient(rgba(256,256,256,0), #75aaa2); /* 标准的语法（必须放在最后） */
}

以上がIE9+と互換性のあるCSS3グラデーション背景色の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。