CSS 背景

CSSの背景プロパティは、要素に背景効果を追加するために使用されます。

これらの章では、以下のCSS背景プロパティについて学びます：

background-colorプロパティは、要素の背景色を指定します。

ページの背景色は次のように設定されます：

body {
  background-color: lightblue;
}

CSSでは、色は以下の方法で指定されることが最も多いです：

任意のHTML要素に対して背景色を設定できます：

ここでは、<h1>、<p>、および<div>要素が異なる背景色を持ちます：

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

opacityプロパティは、要素の不透明度/透明度を指定します。このプロパティは、0.0から1.0までの値を取ることができます。値が低いほど、透明度が高くなります：

div {
  background-color: green;
  opacity: 0.3;
}

注意：opacityプロパティを使用して要素の背景に透明度を追加すると、そのすべての子要素も同じ透明度を継承します。これにより、完全に透明な要素内のテキストが読みづらくなることがあります。

上記の例のように子要素に不透明度を適用したくない場合は、RGBA色値を使用します。次の例では、背景色に対して不透明度を設定し、テキストには適用されません：

CSS Colorsの章で学んだように、RGBを色値として使用できます。RGBに加えて、アルファチャンネル（RGBA）を使用して不透明度を指定することもできます。

RGBA色値は次のように指定されます：rgba(red, green, blue, alpha)。alphaパラメータは0.0（完全に透明）から1.0（完全に不透明）の間の数値です。

div {
  background: rgba(0, 128, 0, 0.3) /* 30%の不透明度の緑色の背景 */
}

プロパティ	説明
background-color	要素の背景色を設定します