CSS 背景

CSS背景属性は、要素の背景効果を定義するために使用されます。

これらの章では、以下のCSS背景属性を学びます：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color 属性が要素の背景色を指定します。

インスタンス

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

body {
  背景色: lightblue;
}

自分で試してみる

CSSでは、色は以下の方法で指定されます：

  • 有効な色名 - 例えば "red"
  • 十六進値 - 例えば "#ff0000"
  • RGB値 - 例えば "rgb(255,0,0)"

以下を確認してください： CSS カラーバリュー、可能な色値の完全なリストを取得します。

他の要素

どのHTML要素にも背景色を設定できます：

インスタンス

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

h1 {
  背景色: green;
}
div {
  背景色: lightblue;
}
p {
  背景色: yellow;
}

自分で試してみる

不透明度 / 透明度

透明度属性は、要素の不透明度/透明度を指定します。値の範囲は 0.0 - 1.0 です。値が低いほど、透明度が高くなります：

透明度 1
透明度 0.6
透明度 0.3
透明度 0.1

インスタンス

div {
  背景色: green;
  透明度: 0.3;
}

自分で試してみる

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

RGBAの透明度を使用

子要素に透明度を適用させたくない場合（例えば、上記の例）、以下を使用してください： RGBA 色値。以下の例では、背景色を設定し、テキストの透明度を設定しないようにします：

100% 透明度
60% 透明度
30% 透明度
10% 透明度

私たちの CSS カラー 章では RGB をカラーバリューとして使用する方法を学びました。RGB カラーバリューの他に、RGB カラー値と アルファ チャネルを一緒に使用します（RGBA） - このチャネルは色の不透明度を指定します。

RGBA カラーバリューは：rgba(赤, 緑, ブルー, アルファ)アルファ パラメータは 0.0（完全透明）から 1.0（完全不透明）までの数です。

ヒント：私たちの CSS カラー この章では RGBA カラーについてさらに学びました。

インスタンス

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

自分で試してみる