【css】背景色(background-color)のみを透過させ文字などは透過させない方法

「背景色（background-color）を透過もする目的でopacityを使ったところ文字やその他の要素まで透過してしまった。」こんな経験コーディングをする人なら一度はあると思います。
最終透過画像をpngで切り出して背景画像（background-image）として使えば再現はできるのですが一々切り出すのも不便ですよね。
実は背景色（background-color）のみの透過はcssの記述だけで実現可能です。さらに、border-colorや、box-shadowなどにもこの背景色（background-color）を透過させる記述は使えるので、知っておくと重宝すると思います。

というわけで、今回は背景色（background-color）のみを透過させる方法を、実際のサンプルを交えながらご紹介します。

背景色（background-color）を透過させる方法

background-colorなどの色指定は従来カラーコードで指定しますが、透過させる場合は「rgba()」を使用します。css内でカラーコードを使って表現できる部分に関してはすべて「rgba()」に置き換えることが可能で、当然透過させることも可能ということになります。
それでは、「rgba()」の具体的な使い方を見ていきましょう。

透過色を指定できるrgba()の使い方

RGBAとは、色を示すRGBのred・green・blueに、透明度を示すalphaが加わったものです。
「rgba()」は、RGBの色を0～255で、透明度を0（透明）～1（不透明）で指定します。

上記のようにrgbaの数値は「,」で区切ってならべます。
それでは具体的な例として「#f00【赤】、透明度50％」をrgba()で表現してみます。

【結果】

上のように背景色を透過することができます。

カラーコードをrgba()に変換してくれるツール

rgba()の使い方はわかったかと思いますので、ここでは、実際にカラーコードをrgba()に変換する方法をご紹介したいと思います。
Web制作にあたってデザインソフトを使われる方が多いと思いますが、そこでカラーコードを調べると大抵同時にR G Bの数値は表示されていると思います。ここに表示されている数値をrgba()にそれぞれ代入すれば色の置き換えは完了です、透過はデザインソフトで100％～0で表現されているとおもうので、それを参考に1～0に置き換えれば大丈夫です。

カラーコードからRGBAを取得する方法はこれで分かったと思いますが、いちいち調べて置き換えるのは面倒ですよね。そこで、カラーコードを簡単にrgba()へ変換してくれるツールを作成しました。
本当に簡単に変換できるので是非一度ためしてみてください！

カラーコードからrgbaへ変換するツール【css】

バックグラウンドカラーの透過などに便利カラーコードをrgbaに変換するツールです。テキストボックにカラーコードを入力またはコピペすることでRGBaに変換されます。透明度は0.05刻みで設定できます。rgba(255,255,255,1)カラ

arts-factory.net

rgba()は背景色（background-color）以外にも活用できる

導入でも軽く触れましたが、rgba()はcssでカラーコードを使う箇所であればどこでも置き換え可能なので、border-colorや、box-shadowなど、さまざまな色を透過することができます。「rgba()」を使えばコーディングの幅が更に広がるとおもうので、覚えておきたいて損はないと思います。