CSS の背景と背景色

CSS には、HTML 要素のスタイルを設定するためのさまざまなプロパティが用意されています。これらのプロパティは、背景画像と色の追加、HTML 要素の幅と高さの設定など、さまざまな目的で使用されます。これらのプロパティには、margin、color、width、height、background、background-color などがあります。具体的には、background および background-color プロパティを使用して、HTML 要素の背景を設定します。

このマニュアルでは、背景と背景色のプロパティの違いを詳しく学びます。

はじめましょう！

CSS background プロパティ

HTML 要素の背景を調整するには、CSS「 バックグラウンド 」の資産を活用しています。これは、さらに 8 つのプロパティの簡略化されたプロパティであり、1 行ですべてを使用できることを意味します。これらの他のプロパティは次のとおりです。

背景色
背景画像
背景位置
背景サイズ
バックグラウンドリピート
バックグラウンド原点
背景クリップ
背景添付ファイル

構文

background プロパティの構文は次のとおりです。

背景：カラー画像の位置・サイズリピート原点クリップ添付

上記のすべてのプロパティの説明に 1 つずつ移りましょう。

CSS の background-color プロパティ

「 背景色 」プロパティで、背景の色を設定できます。色は HTML 要素の後ろに表示されます。

構文

background-color プロパティの構文は次のとおりです。

背景色 : 色

の場所で ' 色」では、要素の背後に表示する背景の色を設定できます。

例

まず、HTML ファイルで、

タグを使用してコンテナーを作成し、見出しと段落を追加します。

HTML

< 分周 >

< h1 > Linuxヒント < / h1 >

< p > 私たちのウェブサイトへようこそ < / p >

< / 分周 >

CSSでは、divの高さを「 100% 」を使用してページ全体に表示し、テキストのフォントサイズを「 xx-ラージ 」。その後、背景色を「 アクア 」。

CSS

分周 {

身長 : 100% ;

フォントサイズ : xx-ラージ ;

背景色 : アクア ;

}

以下の画像では、背景色が適用されていることがわかります。

CSS background-image プロパティ

「 背景画像 ” プロパティは、HTML 要素の背景として 1 つ以上の画像を設定するために使用されます。このプロパティを利用して、さまざまな要素にさまざまな背景画像を追加できます。

構文

background-image プロパティの構文は次のとおりです。

背景画像: url()

ここで、背景に設定したい画像のパスを引数として「 URL() 」。

例

前の例の続きで、「分周 ' クラス。画像の URL を「 URL(画像.jpg) 」：

分周 {

...

背景画像 : URL ( img.jpg ) ;

}

以下の出力は、背景画像が正常に追加されたことを示しています。

画像が繰り返されていることに注意してください。この問題を解決するには、次のプロパティを確認してください。

CSS background-repeat プロパティ

Web ページの背景として画像を追加すると、デフォルトで繰り返されます。この繰り返しを避け、選択に応じてパターンを設定するには、「 バックグラウンドリピート 」の資産を活用しています。

構文

background-repeat プロパティの構文は次のとおりです。

background-repeat プロパティの指定された値の説明を以下に示します。

繰り返す： 縦と横の両方向に画像を繰り返すために使用されます。
繰り返し-x: 画像の繰り返しを水平方向のみに設定するために使用されます。
繰り返し-y: 画像の垂直方向の繰り返しを指定します。
非繰り返し: 画像の繰り返しを避けるために使用されます。

例

ここでは、background-repeat プロパティの値を「 繰り返しなし 」：

分周 {

...

バックグラウンドリピート : 繰り返しなし ;

}

上記のコードの結果を以下に示します。画像が繰り返されていないことがわかります。

CSS の background-position プロパティ

背景画像の位置を設定するには、「 背景位置 」プロパティが使用されます。左上、左中央、左下、右上、右中央など、さまざまな位置で画像を調整できます。

構文

background-position プロパティの構文は次のとおりです。

背景位置 : 価値

の場所で ' 価値」で、画像の位置を指定できます。

例

ここでは、background-position を「中心」：

分周 {

...

背景位置 : 中心 ;

}

以下の出力では、画像がページの中央に表示されます。

CSS background-size プロパティ

背景画像のサイズを設定するには、「 背景サイズ 」プロパティが使用されます。

構文

background-size の構文は次のとおりです。

背景サイズ : 長さ|カバー

以下は、background-size プロパティの値の説明です。

長さ： 背景画像の幅と高さを固定するために使用されます。
カバー： 背景全体の背景画像を調整するために利用されます。

例

背景のサイズを「 100% 「身長と」 80% ' 幅：

分周 {

...

背景サイズ : 100% 80% ;

}

指定した寸法に基づいて画像のサイズが変更されていることがわかります。

CSS の background-origin プロパティ

「 バックグラウンド原点 」プロパティを利用して、背景画像の配置領域を調整します。デフォルトでは、画像は左上隅に調整されます。

構文

background-origin プロパティの構文は次のとおりです。

バックグラウンド原点 : パディングボックス| ボーダーボックス | | コンテンツボックス

background-origin プロパティの値は次のとおりです。

パディングボックス: パディングエッジに従って背景イメージの位置を調整するために使用される background-origin プロパティのデフォルト値です。
ボーダーボックス: 画像のボーダーボックスに従って画像を設定するために使用されます。
コンテンツボックス: 画像の内容に合わせて背景画像を設定する場合に利用します。

ノート： background-attachment プロパティの値が「」に設定されている場合、background-origin プロパティは機能しません。修繕」。

例

まず、コンテナの周囲に境界線を作成します。ここでは、前の例を続けて、パディング値を「 10px 」。その後、ボーダー幅を「 15px 」、スタイルは「海嶺」、「 RGB(1, 68, 68) 」。最後に、background-origin プロパティの値を「 コンテンツボックス 」：

分周 {

...

パディング : 10px ;

国境 : 15px 海嶺 RGB ( 1 、 68 、 68 ) ;

バックグラウンド原点 : コンテンツボックス ;

}

上記のコードの結果を以下に示します。 div の内容に従って画像の位置が設定されていることがわかります。

CSS background-clip プロパティ

「 背景クリップ 」プロパティは、要素の背景色に作用します。要素のパディング、境界線、コンテンツなど、背景色が要素を超えて広がる範囲を制御できます。

構文

background-clip プロパティの構文は次のとおりです。

バックグラウンド原点 : ボーダーボックス | |パディングボックス | コンテンツボックス

background-origin プロパティの値は次のとおりです。

ボーダーボックス: これは、境界線の背景色を設定するために使用される background-origin プロパティのデフォルト値です。
パディングボックス: 要素のパディングボックス内の色を調整するために使用されます。
コンテンツボックス: 要素の内容に応じて背景色を設定するために使用されます。

例

前の例を続けて、境界線スタイルの値を「点在」を参照して、background-clip プロパティを理解してください。その後、background-clip プロパティの値を「 パディングボックス 」：

分周 {

...

背景クリップ : パディングボックス ;

}

出力は、境界エッジが終了したときに白い背景色が表示されていることを示しています。

CSS background-attachment プロパティ

「 背景添付ファイル 」プロパティは、ページをスクロールする際の動作または画像を調整するために使用されます。その動作は、他の要素でスクロールを設定するか、固定することができます。

構文

background-attachment プロパティの構文は次のとおりです。

背景添付ファイル : 価値

background-attachment の値を「修繕」で背景画像を修正するか、「 スクロール 」を使用して、画像をページとともにスクロールできるようにします。

ノート： デフォルトでは、background-attachment プロパティの値は「 スクロール 」。

スクロールすると、追加された背景画像が静止していないことがわかります。それでは、この問題を修正しましょう。

そのために、background-attachment プロパティの値を「修繕」：

分周 {

...

背景添付ファイル : 修繕 ;

}

画像が修正されたことを示す結果は次のとおりです。

次に、背景と背景色のプロパティの比較に進みます。