umbrella-48863_640

どちらも透過する時に使うプロパティ「opacity」「RGBa」ですが、それぞれどのように使うのか、どういった違いがあるのかをザックリとですが書いておこうと思います。 

Opacity プロパティ

対応ブラウザ Google Chrome / Safari 3+/ Firefox 2+/ Opera 9+/ InternetExplorer 9+

Opacityの基本的な記述(モダンブラウザ)

※ 透過度は 0から 1まで

0 に近くなる程透過され、1 で透過なしになります。

Opacityの基本的な記述(IE)

※ 注意  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% で指定

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る