CSS グラデーションの背景プロパティの探索:background-image とbackground-size

CSS グラデーション背景プロパティの探索:background-image と background-size

背景は Web デザインにおいて非常に重要な要素であり、ページに豊かなビジュアルを与えることができます。効果 。以前は、CSS のbackground-color プロパティを使用して要素の背景色を設定できましたが、最新の Web デザインでは、開発者は CSS のグラデーション背景プロパティを使用して、よりクールな効果を実現できます。この記事では、background-image とbackground-size という 2 つの主要な CSS プロパティを調べることに焦点を当て、具体的なコード例を示します。

background-image 属性は、要素の背景画像を設定するために使用されます。以前は、開発者は HTML で タグを使用して背景画像を追加する必要がありましたが、この方法では追加のネットワーク リクエストが必要となり、ページの読み込み時間が長くなりました。開発者は、background-image 属性を使用して CSS で背景画像を直接設定できるため、ネットワーク リクエストが削減され、ページの読み込み速度が向上します。

background-image 属性の構文は次のとおりです。

background-image: url('图片路径');

このうち、url('picture path') は、使用する背景画像を指定します。開発者は、イメージのパスをパラメータとして直接使用することも、相対パスまたは絶対パスを使用することもできます。

単一の画像を背景として使用するだけでなく、グラデーション効果を使用してクールな背景を作成することもできます。 CSS は、線形グラデーションと放射状グラデーションという 2 種類のグラデーション効果を提供します。

線形グラデーションは、開始点と終了点、および 2 つ以上の色の値を指定することによって、グラデーション効果を作成します。構文は次のとおりです。

background-image: linear-gradient(方向, 颜色值1, 颜色值2, ...);

その中で、方向は角度値 (45 度など) または方向キーワード (右へ、下へなど) にすることができます。カラー値には、特定のカラー値 (#ff0000 など) またはカラー キーワード (赤、青など) を指定できます。

たとえば、上から下に赤いグラデーションの背景を作成できます:

background-image: linear-gradient(to bottom, red, #ff0000);

放射状のグラデーションは、1 つ以上の点を指定し、色を半径とオフセットとして取得することによって作成されます。グラデーション効果。構文は次のとおりです。

background-image: radial-gradient(点位置1, 颜色值1, 点位置2, 颜色值2, ...);

このうち、ポイントの位置は長さの値 (10px、50% など) またはキーワード (上、左、中央など) にすることができます。色の値は、特定の色の値または色のキーワードにすることができます。

たとえば、中心から外側に広がる放射状のグラデーション背景を作成できます。

background-image: radial-gradient(circle, red, #ff0000);

背景画像のサイズは、背景画像のサイズに合わせて、background-size プロパティを通じて調整できます。背景領域。背景サイズ属性の構文は次のとおりです:

background-size: 宽度 高度;

このうち、幅と高さは特定のピクセル値 (200px、100% など) またはキーワード (cover、contain など) にすることができます。 。

たとえば、背景画像を 200px × 200px のサイズに設定し、cover キーワードを使用して背景領域に合わせた比率を維持します。

background-size: 200px 200px;
background-size: cover;

background-image と背景サイズのプロパティ、開発 ユーザーは、より豊かで多様な背景効果を作成できます。さまざまなグラデーションや背景画像を調べて試して、ユニークな Web デザインを作成します。この記事の内容がお役に立てば幸いです。ぜひ実際のアプリケーションで革新を試みてください。

以上がCSS グラデーションの背景プロパティの探索:background-image とbackground-sizeの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。