どちらも透過する時に使うプロパティ「opacity」と「RGBa」ですが、それぞれどのように使うのか、どういった違いがあるのかをザックリとですが書いておこうと思います。
Opacity プロパティ
対応ブラウザ
Google Chrome / Safari 3+/ Firefox 2+/ Opera 9+/ InternetExplorer 9+
Opacityの基本的な記述(モダンブラウザ)
※ 透過度は 0から 1まで
0 に近くなる程透過され、1 で透過なしになります。
|
1 2 3 |
.background { opacity:0.5; } |
Opacityの基本的な記述(IE)
|
1 |
.background {filter: alpha(opacity=50);} |
※ 注意 opacityプロパティは要素の前景・背景を問わない透過度です。その為、文字なども透過されてしまいます。 文字など透過させたくない部分は別の要素として記述しなければなりません。
Opacityのサンプルをダウンロードする
RGBa プロパティ
対応ブラウザ
Google Chrome / Safari 3+/ Firefox 3+/ Opera 10+/ InternetExplorer 9+
青色の文字のところは、色の指定です。 茶色の文字が透明度の指定です。
※ 透過度は 0から 1まで
0 に近くなる程透過され、1 で透過なしになります。
RGBaのサンプルをダウンロードする
Opacity とRGBa の違い
「Opacity」と「RGBa」はどちらも透過するためのプロパティですが、適用できるCSSプロパティが違います。
Opacityの適用できるCSSプロパティ
- background
- border
- img
- padding
- テキスト
- 他のプロパティ
RGBaの適用できるCSSプロパティ
- background-color
- border-color
- color
※ おまけ(IE対策）
IE7とIE8で透過を指定する（画像）
透過率は 50% で指定
|
1 2 3 4 |
#background { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } |
※ 詳細 ：Microsoft CSS ベンダー拡張
