CSSのopacityとrgba()は子要素まで透明にするかで使い分ける

公開日：2013年7月25日執筆：佐藤

文字や子要素を含む要素全体を半透明にするならopacity、背景色や境界線など一つの色だけを半透明にするならrgba()を使います。

背景だけを透かしたい要素へopacityを指定すると、上に載せた文字やボタンも薄くなります。子要素へopacity: 1を指定しても、親要素の透明化を取り消せません。透明にする対象を先に決め、要素全体と色を分けます。

opacityは子要素を描画した後の全体へ適用される

次の指定では、背景色だけでなく、文字、境界線、子要素も半透明になります。

<div class="notice">
  <p>入力内容を確認してください。</p>
  <button type="button">確認する</button>
</div>

.notice {
  background-color: #244c66;
  color: #fff;
  opacity: 0.5;
}

opacityは、要素とその子孫を一度一つの画像として描画し、その全体を現在の背景へ合成する処理として定義されています。opacity: 0.5は、箱の背景だけに50％の透明度を指定するものではありません。

値は0から1までです。0は完全な透明、1は完全な不透明で、初期値は1です。範囲外の値は0から1の範囲へ収められます。

親要素へopacity: 0.5を指定した後で、ボタンだけを不透明に戻そうとしても、次の指定では戻りません。

.notice {
  opacity: 0.5;
}

.notice button {
  opacity: 1;
}

ボタンのopacity: 1は、ボタン自身を描画するときの値です。その後、ボタンを含む.notice全体へ0.5の透明度が適用されます。子要素から親要素の合成結果を打ち消すことはできません。

背景画像だけを薄くし、文字を不透明に保つ場合も同じです。画像のある要素へ文字を子要素として入れてからopacityを指定せず、背景用の要素と内容用の要素を分けます。

背景色だけを半透明にするなら、background-colorへrgba()を指定します。

.notice {
  background-color: rgba(36, 76, 102, 0.5);
  color: #fff;
}

この指定では、背景色だけが半透明になり、文字と子要素は通常の不透明度で描画されます。rgba()は、赤、緑、青の三成分へアルファ値を加えた色の指定です。最後の0.5が色の透明度を示します。

rgba()は背景専用ではありません。色を受け付けるプロパティへ使えます。

.notice {
  background-color: rgba(36, 76, 102, 0.5);
  border: 1px solid rgba(36, 76, 102, 0.8);
  color: rgba(255, 255, 255, 1);
}

背景色、境界線、文字色へ別々のアルファ値を指定できます。透明にする範囲を色ごとに分けられる点が、要素全体へ適用するopacityとの違いです。