【CSS3】RGBa画像透過処理について-opacityとの違い

Total 1,243 views
この記事の所要時間は約 3分です。

半透明の画像を使いたいとき
これまでは透明度を設定した PNG形式で画像を書き出すか
背景色なら CSSの opacityで設定していたものです。

しかし opacityはブロック全体が透過されてしまうため
テキストが包括されていた場合は
テキストまで薄く見えてしまうというデメリットがあります。

そこで CSS3の RGBa というプロパティで
シンプルに背景色だけに透過指定をしてみます。

スポンサーリンク


追記 -2010.11.13-

RGBa の効果ですが IE はバージョンによっては対応していません。Safari や Chrome、IE10での閲覧が前提となります。

opacity の場合、
0~1.0 の間で不透明度を設定するだけで透過が可能ですが、
狙った部分だけでなくそれ以外のテキストなども含めて
全体的に薄くなってしまうのが欠点です。

しかし RGBa を使うと
たとえば背景色だけに不透明度を設定するといったことができます。

下にサンプルをご用意しました。

 

透過指定なし

「A」は透過指定を一切つけてません。
ベース地(300×200px)のおよそ中央に「Sample」というテキストを置いてあり
テキストの背景色に「白」を設定しています。

A

Sample

 

コードはコチラ↓。

【HTML】

【CSS(主な部分だけの抜粋)

<div>の中に入れ込んだ Sample というテキストには
透過を一切指定してない白の背景をつけているため、
ベース画像の「ベース地」という文字が完全に隠れてしまっています。

 

opacity 50%

次の「B」は、テキストブロックopacity(50%透過)を設定してあります。

B

Sample

 

コードはコチラ↓。
【CSS】

背景色はもちろん 50%透過になるんですが、
同時にテキストも 50%透過になってしまいます。

つまりブロック全体が透過指定を受けてしまってます。

IE は上記の書き方では効果がなく "filter" を使います。

しかも IE 6,7 と IE 8 では書き方が異なるようで、すべてに対応させるためには下記のように指定しなければならないみたいです。ホント面倒。

RGBa 50%

最後の「C」テキストの背景色(白)RGBa(50%透過)設定したもの。

RGBa は光の三原色(RGB)をそれぞれ 0~255 で指定し、
透過度(alpha)を 0~1.0 の間で指定します。

C

Sample

 

コードはコチラ↓。(rgb 255,255,255 というのが#FFF に相当します)

【CSS】

先の opacity 設定と大きく異なるのが、
指定した背景色のみに透過がかかり、テキスト部は一切透過しないということです。

RGB の値に関しては 16進数表記と RGB の相互変換サイトがいくつかあるので
そういったwebサービスを利用するのが手っ取り早いでしょう。
(「RGB変換」といったキーワードでいくつか出てきます)

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)