ホームページ > 記事 > ウェブフロントエンド > IE9+と互換性のあるCSS3グラデーション背景色の使用方法
背景色は、単色に加えて、さまざまな色の組み合わせを使用してグラデーションの背景色を作成し、ページを豊かにすることもできます。
グラデーションの背景は 2 つのタイプに分けられます:
1. 線形グラデーション、
2. 線形グラデーション
の 3 つのタイプに分けられます。そして斜めgradients Gradient
構文:
88ec3091817142757563c63a206d98b3 = Linear-gradient([ [ 0c0cb308ee3d2ee3281772bfc9b806c2| to af9fecd782e82fdb27328a37b5efd76c ] ,]? f95b0f82451efa5581f83eb3cb54dfac[, 9abf9243314f6d1cd71ac1087d19db3b]+)7244d59969db22b90b5622606959f1e3
= [上 | 下]79ed98e4d14ad14a016bf726de2ac0c5
= < ; color> [to left: 右から左へのグラデーションを設定します。
to right: 左から右へのグラデーションを設定します。
tobottom: 上から下へのグラデーションを設定します9abf9243314f6d1cd71ac1087d19db3b: 指定したグラデーションの開始色と終了色を設定します
b10fb37415d019cfffa8c4d7366c607f: 色を指定します
d82af2074b26fcfe177e947839b5d381: 長さの値を使用して開始カラー位置と終了カラー位置を指定します。負の値は許可されません
42c97a047d75abc12b9b351eb8562711: 開始色の位置と終了色の位置を指定するには、パーセントを使用します。
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 サイトの他の関連記事を参照してください。