CSSで透明度を取り入れるときのOpacityとRGBaの違い

大きいサイズのモニターや解像度の高いデバイスが普及してきたことで、画像をフルスクリーンで背景にしたり、画像を多く使うサイトが増えてきました。そのため、画像の上に文字を配置する機会も多くなりました。

画像によってはそのまま文字を配置しても可読性に問題ない場合もありますが、可読性が低くなるようなら文字の下に透明度を調整した背景を使うと良いでしょう。

CSSで背景の透明度を調整する際に注意する点は、OpacityとRGBaの違いを理解しておくことです。

Opacityは指定した要素内にある他の要素にも影響するので、要素内のテキストやボーダーや画像を半透明にしたくない場合(背景だけ半透明にしたい場合)はRGBaで透明度を調整すると良いでしょう。

例としてテキストの下に黒の半透明の背景を用いるソースコードをOpacityとRGBaで見てみましょう。

<h1>透明度 OpacityとRGBaの違い</h1>

<div id="opacity_box" class="box">
  <h2>Opacity</h2>
  <p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

<div id="rgba_box" class="box">
  <h2>RGBa</h2>
  <p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

body{
  background-color: #fac559;
}

.box{
  width: 200px;
  height: 200px;
  color: #ffffff;
}

#opacity_box{
  background-color: #000000;
  opacity: 0.5;
}

#rgba_box{
  background-color: rgba(0,0,0,0.5);
}

opacityで透明度を調整したボックスは、その子要素であるh2タグの見出し、pタグのテキストも透明度が0.5になります。

background-colorのプロパティでrgbaのa(alpha ４番目の値)で透明度を調整したボックスは、その子要素であるh2タグの見出し、pタグのテキストには影響を与えないので文字の透明度は変わらないままです。

このような違いを理解しないまま透明度を調整していると気づかないうちに文字が半透明になって薄くなってしまったりします。

それが文字を含めた要素全体を半透明にして、下の背景画像を見せるエフェクトなど、意図したデザインであれば構いませんが、意図していなければ背景画像によっては文字が半透明になって見にくくなってしまいますので、きちんと使い分けるようにしましょう。

Pocket