CSS を使用して要素の背景画像を設定するには、どのプロパティが使用されますか?

CSS では、「background-image」プロパティは、CSS を使用して要素の背景画像を設定するために使用されます。背景画像プロパティには、以下に説明する 4 つの異なるプロパティがあります。

• Url () - 特定の場所から画像を取得し、背景として設定するには、画像パスまたはリモート URL を使用します。

• None - ユーザーは、背景画像プロパティの値として none を使用して背景を削除できます。

• Initial - 初期背景を設定します。ほとんどの場合、背景はありません。

• 継承 - 親要素と同じ背景画像を設定します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って CSS の「background-image」属性を使用できます。

リーリー

上記の構文に示すように、さまざまな値を使用して背景画像を設定できます。

例 1

以下の例では、HTML div 要素を作成し、CSS を使用して高さと幅を指定します。さらに、「background-image」CSS プロパティを使用して div 要素の背景を設定しました。

出力では、div 要素のサイズが画像より大きい場合、背景画像が繰り返し設定されることがわかります。

リーリー

例 2

以下の例では、背景画像の値として「initial」を使用しています。出力では、初期背景が設定されていないため、div 要素に背景が設定されていないことがわかります。

リーリー

例 3

以下の例では、背景として画像とともにグラデーションを設定します。出力では、ユーザーは勾配が上から下にあり、div 要素のコンテンツが勾配の上にあることを確認できます。

リーリー

例 4

以下の例では、div 要素の背景として 2 つの画像を設定します。さらに、これら 2 つの要素に異なる背景の位置を設定します。出力では、一方の画像が右下隅に位置し、もう一方の画像が左上隅に位置していることがわかります。

2 つの背景画像を一緒に使用すると、最初の画像が 2 番目の画像の上に表示されます。

リーリー

このチュートリアルでは、ユーザーは「background-image」プロパティを使用して画像の背景を設定する方法を学習しました。ユーザーは、HTML 要素の背景としてグラデーションを設定する方法も学びました。ユーザーは複数の画像を背景として使用することもでき、画像の URL を値として追加すると、背景画像もスタックが作成されたのと同じ順序で表示されます。

以上がCSS を使用して要素の背景画像を設定するには、どのプロパティが使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。