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

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

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

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

RGBaの実践

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

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

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

透過指定なし

「A」は透過指定を一切つけてません。

ベース地（300×200px）のおよそ中央に「Sample」というテキストを置いてあり、テキストの背景色に「白」を設定しています。

A

 

コードはコチラ↓。

【HTML】

【CSS（主な部分だけの抜粋）】

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

opacity 50%

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

B

 

コードはコチラ↓。

【CSS】

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

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

RGBa50%

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

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

C

 

コードはコチラ↓。

（rgb 255,255,255 というのが#FFFに相当します）

【CSS】

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

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

（「RGB変換」といったキーワードでいくつか出てきます）

以上です。