透明度を表す「opacity」 と 「RGBa」の違いと使い分け

対応しているブラウザ

ともにCSS3ですのでブラウザによってサポートしているもの、サポートしていないものがあります。

と言ってもIE以外は問題なく対応できています。IEについてはIE9から対応するようになりました。Firefox、Chrome、Safari、Operaなどはかなり前のバージョンから対応できています。

opacityとRGBaの仕組みについて

まずは、それぞれの仕組みを説明します。

opacityの仕組み

opacityは不透明を表し、値には0～1の間で「0.5」「0.555」などと指定します。

RGBaの仕組み

RGBaは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。

opacityとRGBaの決定的な違い

仕組みを比べてみると決定的な違いが分かるかと思います。

「opacity」はプロパティで、「RGBa」はプロパティの値を表すものということです。

ですので、opacityはセレクタ内全体が不透明になるのに対し、RGBaはプロパティのみ不透明になります。

「opacity」と「RGBa」の比較画像

左がopacityで全体を不透明にしたもの、右がRGBaで背景色を指定したものとなります。サンプルコードは後に載せています。

見比べると違いは明らかだと思います。

opacityのサンプル

IE8以下はopacityに対応していませんので、IE9か他のブラウザでご覧ください。

.opacity-rgba {
  color:#000033;
  width:300px;
  padding:5px 0;
  margin:0;
  text-align:center;
  font-weight:bold;
}
#opacity01 { background:#003366; opacity:0.1; }
#opacity02 { background:#003366; opacity:0.2; }
#opacity03 { background:#003366; opacity:0.3; }
#opacity04 { background:#003366; opacity:0.4; }
#opacity05 { background:#003366; opacity:0.5; }
#opacity06 { background:#003366; opacity:0.6; }
#opacity07 { background:#003366; opacity:0.7; }
#opacity08 { background:#003366; opacity:0.8; }
#opacity09 { background:#003366; opacity:0.9; }
#opacity10 { background:#003366; opacity:1; }

<div class="opacity-rgba" id="opacity01">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity02">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity03">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity04">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity05">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity06">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity07">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity08">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity09">opacityのサンプル</div>
<div class="opacity-rgba" id="opacity10">opacityのサンプル</div>

サンプル

背景と文字がともに透明になっていることが分かると思います。

RGBaのサンプル

IE8以下はRGBaに対応していませんので、IE9か他のブラウザでご覧ください。

.opacity-rgba {
  color:#000033;
  width:300px;
  padding:5px 0;
  margin:0;
  text-align:center;
  font-weight:bold;
}
#rgba01 { background:rgba(0,51,102,0.1); }
#rgba02 { background:rgba(0,51,102,0.2); }
#rgba03 { background:rgba(0,51,102,0.3); }
#rgba04 { background:rgba(0,51,102,0.4); }
#rgba05 { background:rgba(0,51,102,0.5); }
#rgba06 { background:rgba(0,51,102,0.6); }
#rgba07 { background:rgba(0,51,102,0.7); }
#rgba08 { background:rgba(0,51,102,0.8); }
#rgba09 { background:rgba(0,51,102,0.9); }
#rgba10 { background:rgba(0,51,102,1); }

<div class="opacity-rgba" id="rgba01">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba02">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba03">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba04">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba05">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba06">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba07">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba08">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba09">RGBaのサンプル</div>
<div class="opacity-rgba" id="rgba10">RGBaのサンプル</div>

サンプル

背景は透明になっていますが、文字はすべて同じであることが分かると思います。

IE8以下ではどのように表示されるか

CSS3を使うにあたってネックになるのがIEです。IE8以下はCSS3にほぼ対応できていないにもかかわらず、新バージョンへの乗り換えも進んでいません。

そんなIE8以下でどのように表示されるか知っておく必要があります。

「opacity」の場合

opacityはIE8以下の場合に適用されず、不透明になりません。

先ほどのサンプルをIE8で確認すると、以下のように、すべて同じ文字色と背景色になります。

「RBGa」の場合

RGBaの場合は、値が無効となるため表示されません。例えば背景色をRGBaで指定した場合、その設定は無効となります。

こちらも先ほどのサンプルをIE8で見ると、以下のように、文字は表示されますが、背景は表示されません。

どのように使い分ければいいのか

このように同じ透明度を表す「opacity」と「RGBa」ですが、使い方は違いますので、用途によって使い分けるといいと思います。

画像を半透明にする場合は「opacity」

画像に透明度を適用する場合は、opacityを使う必要があります。

#opacity-img {
  opacity:0.5;
}

<div id="opacity-img">
  <img src="画像のアドレス" alt="サンプル" />
</div>

このように指定すれば、以下のサンプルのように画像が半透明になります。

個別に透明度を適用したい場合は「RGBa」

RGBaはプロパティの値として使いますので、background、color、borderなど個別に指定することができます。実用的ではないですがtext-shadowなどにも使えます。

今回のサンプルで分かるように、すべてに透明度が適用されると、文字が見難くなったりします。そんなときは、RGBaで背景にのみ適用する方が見やすくなります。

IE8以下を意識した場合は臨機応変に

先ほど紹介したようにIE8以下ではopacityもRGBaも対応していません。opacityを使った場合は不透明にならず、RGBaの場合はプロパティが無効になります。

ですので、IE8以下を意識した場合、どちらが影響が少ないか比べた上で使用するといいと思います。

おまけ：IE8以下でも対応する

先日紹介したところですが、関連するので改めてご紹介します。

IE8以下でopacityを表現

不透明を表すIE独自の仕様を使います。

.opacity {
  opacity:0.7;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

0～100　まで指定でき、数値が小さいほど透明になります。

IE8以下でRGBaカラーモデルを指定する

こちらもIE独自の仕様があります。

.rgba{
  background: rgba(51, 102, 153, .4);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#88336699', endColorstr='#88336699');

IEでは#AARRGGBBの最初のAAは00（透明）～ ff（不透明）の範囲で透明度を指定し、RRGGBBは色を指定します。本来gradient()はグラデーションとして使うものです。