勾配を使用して動的なWebバックグラウンドを作成するには、畫像なしでCSS線形または放射狀の勾配を使用します。線形勾配は、背景：線形勾配（右、＃ff9a9e、＃fad0c4）などの線形勾配（）関數(shù)を使用して直線に沿って色を変化させます。水平ピンクからピーチの勾配用。 1）方向を定義します（例、右、下、角度）。 2）必要に応じて、フォールバックの色とブラウザのプレフィックスを含めます。 3）複雑さのために複數(shù)のカラーストップを追加します。半徑方向の勾配は、背景のような円形効果にラジアルグレジエント（）を使用します：radial-radient（circle、＃a18cd1、＃fbc2eb）;。 4）カスタマイズのために形狀、サイズ、および位置を調(diào)整します。急激な遷移の場合、背景のようなハードストップを使用してください：線形勾配（右、白い50％、黒い50％）;。 5）高度なデザインのバックグラウンドイメージのコンマを備えた勾配を重ねます。勾配はスケーラブルで、レスポンシブレイアウトをサポートし、畫像や透明性と組み合わせると視覚的な深さを強化します。

グラデーションは、畫像ファイルを追加せずにWebの背景をより動的にすることができます。 CSSで簡単に制御でき、畫面サイズにわたって完全にスケーリングできます。

基本的な線形勾配を作成する方法

線形勾配は、直線に沿って徐々に色を変えます。 backgroundまたはbackground-imageプロパティ內(nèi)のlinear-gradient()関數(shù)を使用して定義します。

例えば：

背景：線形勾配（右、＃ff9a9e、＃fad0c4）;

これにより、ピンクからピーチまでの水平勾配が作成されます。方向（ to right ）は、 45degのような角度、またはto top leftコンパスの方向to bottom変更することができます。

キーポイント：

• 勾配がサポートされていない場合に、常にフォールバックの色を含めます。
• 古いサポートに必要な場合はブラウザプレフィックスを使用します（ただし、最新のブラウザは主にそれらを処理します）。
• 括弧內(nèi)にさらに多くの色をリストすることで、複數(shù)のカラーストップを設(shè)定できます。

円形効果のための放射狀勾配

半徑方向の勾配は、中心點から外側(cè)に放射されます。柔らかい背景やスポットライト効果に役立ちます。

これが簡単なバージョンです：

背景：radial勾配（circle、＃a18cd1、＃fbc2eb）;

これにより、中央から始まる円形勾配が作成されます。形狀（ circleまたはellipse ）と位置（ at top leftように）を調(diào)整できます。

一般的な調(diào)整：

• 変更サイズのキーワード： closest-side 、 farthest-cornerなど。
• オーバーレイ効果の透明度を追加します。
• 深さの背景畫像と組み合わせます。

ハードストップとシャープな移行を追加します

デフォルトでは、勾配がスムーズにブレンドします。しかし、時には色の間に突然の変化が必要な場合があります。これは、色が役立つ場所です。

試す：

背景：線形勾配（右、白い50％、黒い50％）;

これにより、背景が正確に半分に分割されます。ピクセル値、パーセンテージ、または複數(shù)のストップを組み合わせることもできます。

役に立つ：

• 縞模様のパターン
• スプリットスクリーンレイアウト
• 影やハイライトのシミュレーション

background-imageプロパティでコンマでそれらを分離することにより、複數(shù)の勾配を重ねることができます。

これが、CSSで勾配を効果的に使用するコアです。それは複雑ではありませんが、色の配置やフォールバックなどの小さな詳細は大きな違いを生む可能性があります。

以上が背景にCSSグラデーションを使用しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。