OpacityプロパティとRGBaプロパティバリューは，どちらも要素に透明度を指定することができるCSS3のプロパティとプロパティバリューです。どちらも透明度を指定し背景が透けさせることが可能なプロパティです。

今回は，OpacityプロパティやRGBaプロパティバリューの実践的テクニックと，それぞれの違いを説明します。OpacityプロパティもRGBaプロパティバリューもイマジネーションを利用する事で効果的な使い方ができます。

OpacityプロパティとRGBaプロパティバリューをサポートしているブラウザ

OpacityプロパティとRGBaプロパティバリューをサポートしているブラウザは以下のとおりです。

Opacityプロパティ

Firefox 2以上，Safari 2以上，Opera 9以上，IE8以上，Chrome

RGBaプロパティバリュー

Firefox 3以上，Safari 3以上，Opera 10以上，IE8以上，Chrome

上記のように，OpacityプロパティはRGBaプロパティバリューに比べ，ブラウザのサポートが優れています。ただ，最近は，RGBaプロパティバリューもブラウザのサポートが進んできているのが分かります。現状としては後で説明する違いが影響しRGBaを利用する開発者が増えてきています。

今回のサンプル

サンプルを利用して，最初にOpacityプロパティとRGBaプロパティバリューの記述方法をそれぞれ確認していきましょう。

今回，利用するHTMLソースは以下のものになります。CSSはhtmlにはあらかじめfont-familyプロパティを指定しています。h1の文字色は薄い青（#94B3C5）を指定しています。

<div id="photo">
  <h1>ボストンの夕暮れ</h1>
</div>

html {
  font-family: verdana, Osaka, sans-serif;
}

h1{
    color: #E45A49;
}

（opacityプロパティとRGBaプロパティバリューを指定せずに）背景色と文字色を指定した状態では，以下の図のように表示されます。

Opacityプロパティ

まず，サンプルのデフォルトにOpacityプロパティを適用します。そもそもOpacityは"透明"という意味で，背景が透けます。まずはOpacityプロパティは，様々CSSプロパティと要素に適用できることを確認しましょう。

Opacityプロパティを適用できるCSSプロパティ

• ボーダー
• パディング
• 背景色
• 画像
• テキスト
• 他のプロパティ

Opacityプロパティのメリットは，サポートしているブラウザが多いことです。ただデメリットとして，コードが煩雑になるので注意が必要なプロパティになります。

Opacityプロパティの記述方法

Opacityプロパティの記述は非常にシンプルです。

セレクタ {
  opacity: 値
}

Opcityプロパティの値には，0縲・までの値をコンマ（.）を使って指定します。.6,0.6や0.46726と小数点以下を指定することもできます。

Opacityプロパティを使った基本のサンプル

デフォルトのサンプルに，Opcityプロパティを用いてデザインを追加してみました。コードは以下のとおりです。

<div id="photo">
  <h1>ボストンの夕暮れ</h1>
</div>

html {
  font-family: verdana, Osaka, sans-serif;
}

div#photo {
  background-color: #000;
  opacity: .6;
}

h1 {
  color: #E45A49;
}

Opacityプロパティをサポートしたブラウザでは，次のように表示されます。