こんばんは、今日は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
コメントを残す