HOME > ウェブデザイン > 【CSS3】RGBa画像透過処理について-opacityとの違い
公開日:2010.11.10
この記事は約1分で読めます。

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

この記事は最終更新日から8年以上経過しているため現状にそぐわない可能性もあります。

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

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

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

追記 -2010.11.13-

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

SIRIUSレビューイメージ画像

RGBaの実践

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” を使います。

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

RGBa50%

最後の「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変換」といったキーワードでいくつか出てきます)

以上です。

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

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