スポンサーリンク

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

この記事は約4分で読めます。

CSS:親を半透明にしつつ、子を不透明にする

こんにちは、さち です。

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

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

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

スポンサーリンク

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

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

CSS:親を半透明にしつつ、子を不透明にする

そこで、下記のような 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; で再び不透明に。背景には「横しま(赤)」 を設定しています。

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

サンプル

ダメじゃん。

#horizontalopacity: 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 を完全な不透明にできました。赤い横シマも透けていません。

コメント

タイトルとURLをコピーしました