CSSを使用して背景画像のサイズを設定しますか?

CSS を使用すると、「background-image」プロパティを使用して HTML 要素の背景画像を設定できます。また、背景画像を追加した後、そのサイズを設定する必要があります。

CSS の「background-size」プロパティを使用して、背景画像のサイズを設定できます。

＃＃＃文法＃＃＃

ユーザーは CSS を使用して、次の構文に従って背景画像のサイズを設定できます。

リーリー

上記の値を使用して、背景画像のサイズを設定できます。ここですべての値について説明しました。

• 幅 長さ

  - 背景画像の幅と高さを設定します。ユーザーは、幅と長さの値にピクセル、パーセンテージ、またはレムを使用できます。

• Width

  - 画像の幅のみを設定し、「自動」高さを設定します。

• Contain

  -背景画像のサイズを縮小せずに、HTML 要素の背景画像を設定するために使用されます。

• 継承

  -親要素の背景画像から背景画像のサイズを継承します。

• Cover

  -背景画像の寸法を HTML 要素に収まるように設定します。

例 1

以下の例では、HTML div 要素の背景画像を設定します。 div 要素のサイズは 500 X 300 です。背景サイズプロパティを使用して、背景画像のサイズを 200 X 200 に設定します。

出力では、背景画像のサイズが div 要素よりも小さいことがわかります。さらに、繰り返しを避けるために「background-repeat: no-repeat」CSS プロパティを使用しました。

リーリー

例 2

は次のように翻訳されます:

例 2

以下の例では、「background-size: cover」CSS プロパティを使用して背景画像のサイズを設定します。

出力では、背景画像が div 要素に適合していることがわかります。ただし、background-size を cover に設定すると、画像の端の一部が切り取られます。

リーリー

例 3

の中国語訳は次のとおりです:

例 3

以下の例では、CSS プロパティ「background-size: contian」を使用して背景画像のサイズを設定します。

出力では、画像のサイズを抑制せずに背景画像を設定していることがわかります。

リーリー

例 4

は次のように翻訳されます:

例 4

以下の例では、「background-size」属性の幅の値のみを指定します。 「background-size」プロパティとして値のみを使用すると、高さが自動に設定され、ユーザーは出力でこれを確認できます。

リーリー

ユーザーは、CSS を使用して背景画像のサイズを設定する方法を学びました。カスタム寸法を設定して背景画像を設定できます。さらに、背景の寸法の幅と高さを「自動」値に設定できます。ユーザーが HTML 要素全体を背景で覆いたい場合は、background-size 属性の値として「cover」を使用する必要があります。

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