CSS：半透明の黒背景を「opacity」で実装すると上手くいかない

こんにちは、さち です。

上の画像のように、コンテンツの上に半透明の黒い背景をかけて、さらにその上に別のコンテンツを表示する。こんなデザインをよく見かけると思います。

このようなデザインを CSS の opacity を使って実装しようとしたんですが、上手くいきません……。

今回は、その解決方法について書いていきます。

「opacity」の継承は上書きできない

下図のように、「親要素」のコンテンツの上に、半透明の黒背景を持つ「子要素」を重ねて、さらにその上の「孫要素」にコンテンツを表示しようと思います。

そこで、下記のような HTML を用意します。

<div id="vertical">
  <div id="dark">
    <div id="horizontal"></div>
  </div>
</div>

CSS はこんな感じです。

html, body, div {
  height: 100%;
}

/* 縦シマ（青） */
#vertical {
  background-image: linear-gradient(90deg, blue 25%, transparent 25%);
  background-size: 36px 36px;
  padding: 8%;
}

/* 黒背景 */
#dark {
  opacity: 0.6;
  background-color: black;
  padding: 8%;
}

/* 横シマ（赤） */
#horizontal {
  opacity: 1;
  background-image: linear-gradient(red 25%, transparent 25%);
  background-size: 36px 36px;
}

親要素 #vertical は、背景に「縦しま（青）」を設定。

子要素 #dark は、opacity: 0.6; を設定して半透明の黒い背景に。

孫要素 #horizontal は、opacity: 1; で再び不透明に。背景には「横しま（赤）」 を設定しています。

実際に表示するとこうなります。

ダメじゃん。

#horizontal に opacity: 1; を設定したのに半透明のまま。赤い横シマが透けてしまい、青い縦シマが見えています。

実は、opacity の子要素への継承は上書きできない仕様なんです。不便っ！！

「rgba()」を使って実装する

仕様上、opacity では実装できないので、黒背景 #dark の背景色の指定に rgba() を使います。

rgba() は、色を指定する「RGB（赤・緑・青）」に加えて、不透明度を指定する「A（アルファ）」も記述できる形式です。

今回の場合、欲しい色は不透明度 0.6（opacity: 0.6;） の黒色なので、rgba(0, 0, 0, 0.6) と記述します。

/* 縦シマ（青） */
#vertical {
  background-image: linear-gradient(90deg, blue 25%, transparent 25%);
  background-size: 36px 36px;
  padding: 8%;
}

/* 黒背景 */
#dark {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8%;
}

/* 横シマ（赤） */
#horizontal {
  background-image: linear-gradient(red 25%, transparent 25%);
  background-size: 36px 36px;
}

これを実際に表示するとこうなります。

上手くいきました。

黒背景 #dark を半透明にしつつ、#horizontal を完全な不透明にできました。赤い横シマも透けていません。