こんばんは、今日はrgbaの説明をしたいと思います!

rgbaとはディスプレイ画面で色を表現するために使われる、赤(Red)、緑(Green)、青(Blue)、の3色にアルファ(Alpha)と呼ばれる透明度の情報を加えたもの!色の表現とともに半透明の表現ができるようになる。

色を透明にしたいときは色をrgbaで指定します。rgbaは4つの値をコンマ(,)区切りで入れ、4つ目の値が透明にする度合いで、0 ~ 1の数値で指定します(値が小さいほど透明になります)。
opacityプロパティは要素全体を透過させますが、rgbaを使うとその色だけを透明にすることが出来ます。

実際にcssのコードで書くと

.rgba-クラス名{

background-color:reg(赤、緑、青、透明度);

}

みたいな形ですね、ですが慣れないと色の数値とか透明度ってよく解らないですよね?僕もその辺は覚えてませんwww

そんな時におすすめなのが、rgbaジェネレーターです。

以下のrgbaジェネレーターはメインの色を指定するだけで、10段階にわけた透明度を自動で作成してくれます!

https://generator.web-alpha.info/rgba/

色を決めたらジェネレーターを使って視覚的に確認しつつ、適した透明度のrgba値を選べば、コピーして貼り付けでOKです!

opacityプロパティは要素全体を透過させますが、rgbaを使うとその色だけを透明にすることが出来ます!

上手くいろんな要所で使いわけできるよう覚えておきましょうww