CSSで要素を透過させる方法

デザインする際に、背景色を透明にして要素を透過させたいと思ったことはありますか？

CSSを使えば、これも簡単にできてしまうので覚えておきましょう。今回は、簡単なrgbaを利用した要素の透過方法をご紹介します。

rgbaを利用して要素を透過する

カラーコードではなく、rgbaを利用することで簡単に透明度を変更することが可能になります。普段色の設定の時に使っている、rgb（red, green, blue）にa（alphachannel）アルファチャンネルという透明度を表す値を追加することで、透明度を変更できるというものです。

わかりやすいように背景に画像を設定しました。

これは、普段通り背景色のみ設定してあるので、透過していません。この透過したい要素の、背景色をrgbaで設定してみます。

試しに、rgba（243, 255, 255, 0.60）にカラーコードの部分を書き換えます。先ほどのカラーコードの色をrgbに変換したものに、アルファチャンネルを0.60で指定してあります。

透過して表示することに成功しました。

アルファチャンネルは１%が完全に不透明な状態になるので、１より小さい数字を入力することで要素を透過させることができます。