CSSで背景色や文字色を透明・透過させる方法[２パターンご紹介]

みなさんこんにちは！ワトスンです。
今回は、、

といった疑問に答えます。

透明・透過させる方法は２パターンありますが、それぞれ多少の違いがあるので、きちんと区別して使用していってもらえたらなと思います。

それではご紹介していきます。

背景色や文字色を透明にする方法

背景色または文字色の透明化のやり方をご紹介しますが、それぞれやり方が同じなので、今回は例として背景色の透明化をご紹介していきます。

↑上の画像のようにヘッダーの背景だけを透明にしたい時などに使用します。

具体的には以下のようにおこなっていきます。

rgba()を使用する

背景色だけを透明にするにはbackground-colorプロパティにrgbaで色と透過度を指定していきます。

↑このように値の4つ目に透過度をしていします。

rgaで色を指定したい場合は「カラーコード一覧」を参考にしてみて下さい。

最後の値で透明度を指定します。
透明度は0~1まで指定でき、0に近づくにつれ透明度は高くなっていきます。

この方法は色を指定するものならなんでも使用できるので、背景色・文字色両方でお試しください。

これがrgbaで透明化を実現する方法です。

次は少し違った方法をご紹介します。

要素を透過させる方法

次は、背景色や文字色などの色だけを透明にする方法ではなく、要素そのものを透明にする方法をご紹介していきます。

要素そのものを透過させると、要素の中の子要素も全て透明になります。

それではご紹介していきます。

opacityプロパティを使用する

要素そのものを透過させるには、「opacityプロパティ」を使用します。

このプロパティは、指定した要素を透過させることができるものです。

このように指定します。

透過度は0~1まであり、0に近づくにつれ透過度は高くなっていきます。

注意点としては、背景色や文字色だけでなくその中にある全ての要素が透過してしまうので、背景色だけ透明にしたい時などは気をつけて下さい。

以上で2パターンの透明・透過の方法をご紹介しました。

それぞれ使う用途が異なるので気をつけてご使用ください。

なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください！

以上です。