背景だけを薄くしたいのに文字も薄い？opacityと背景色の透明度を比べよう

カードの背景を薄くしたかったのに、中の文字まで薄くなった。CSSのopacityと、背景色だけに透明度を付ける指定を比べてみよう。

このページでは、同じカードで「全体を薄くする」と「背景だけを薄くする」を切り替える。ブラウザだけで試せるよ。

opacityは、中身も含めた全体へ効く

.card { opacity: 0.4; }

この指定では、カードをその内容と一緒に描いた結果へ透明度がかかる。子の文字へopacity:1を付ければ、親の透明度の影響から完全に抜け出せる、という仕組みではないよ。

背景色だけへアルファを付ける

.card {
  background-color: rgb(100 80 180 / 40%);
}

こちらは背景色の透明度を40%にする例。文字のcolorや要素全体のopacityを同時に変えなければ、文字まで同じ指定で薄くなるわけではない。

作例で文字の読みやすさも見る

1. 全体のopacityへ切り替え、文字と枠線も薄くなることを見る。
2. 背景色だけの透明度へ切り替え、文字の濃さを比べる。
3. リセットで背景だけの設定へ戻す。

作例の背面には薄い模様を置いている。透明な色は背面と混ざって見えるので、同じ指定値でも背景が変われば見える色も変わるよ。

見えなくても操作できることがある

opacity:0は、要素を通常の配置から取り除く指定ではなく、操作を無効にする指定でもない。非表示や無効を実装するときは、意味と操作性を別に考えよう。

MDNのopacityで、文字のコントラストにも関係することを確認できる。薄い見た目を採用する前に、文字のコントラスト確認もしてみてね。