重ねたオブジェクトをopacityを使わずrgba値で背景色だけを透過する方法【CSS初心者講座】

Web制作において、背景画像などに対して最前面のオブジェクトを透過させたい場合がありますよね。

その場合は、CSSのopacityプロパティを利用して透過させる事ができると思いますが、場合によっては使い物にならない時がありますので、そちらの対処法の紹介をしていきます。

「opacity」が使えない理由

CSSでの透過と言えば、opacityですよね。opacityを使えばいとも簡単に透過を実装する事ができます。

しかし、透過するものが一つだけ（例えば、背景色だけ）なら問題ないのですが、背景画像を含めた文字や枠線を上に乗せている場合などもあります。

その場合は、以下の例のように、文字ごと透過してしまいますので使い物になりません。

そんな時に役立つのが、プロパティ「値」に利用できる「rgba」です。

「rgba」値を利用しよう

「rgba」とは、「通常のrgbカラー+a（アルファ）」という意味です。よくデザインの世界では、「α（アルファ）」を透明度の領域として表現する事がありますね。

rgbaの値は以下のように使用していきます。

backgroundの意味がわからない方は、以下の記事を参考にしてください。

X・Y・Zの数値は1〜255までのRGBカラーに沿って書いてください。

ちなみに、rgbaの値には、16進法の値（#FFFFFFなど）は利用できませんので覚えておきましょう。

Aの値に関しては、前者のRGBカラーの透明度を表すもので、0〜1までの小数で指定します。

0の場合は100％の透明で何も見えません。1の場合は透明効果はないのでそのままの色になります。

以下が実装例になりまして、文字を透過させず、背景の赤色だけ30％の透過仕様になっています。

まとめ

いかかでしたででしょうか？

CSSプロパティの「値」で「rgba」は非常に役立ちます。

今回のように、背景画像のうえでオブジェクトの背景色を透過させる事はもちろんですが、例えば色なんかを決める際でも、RGBで指定してから透明度を下げる（微調整する）事で、周りの色と馴染ませる事が容易になります。色をピンポイントで合わせていくのって、結構手間だったりするんですよね。

背景色を透過させるにはopacityを使う方法で考えがちですが、難しい事ではなく、基本的な値を変更するだけとっても簡単に実装できますね。