cssで背景の色を半透明に

備忘録です。

例えば、白いボックスの背景色を50％の透明にする場合

白　#FFFFFFをrgbaの数字に変更するにはこういうサイトで調べます。

http://www.color-sample.com/colors/639/

白は、255　255　255　なので、半透明の背景色にするには

background-color: rgba(255, 255, 255, 0.5);

（解説）

RGBを、Red　Green　Blueの表記にすると　255　255　255　そして最後が透明の度合いです。

黒い背景のボックスを、20％の透明にする場合

http://www.color-sample.com/colors/000000/

ブラック　#000000は、rgbaの数字にすると　0　0　0になるので

background-color: rgba(0, 0, 0, 0.2);

例えば、こんな色　ネイビーブルーを70％なら

http://www.color-sample.com/colors/481/

Red : 52 Green : 61 Blue : 85

なので、

background-color: rgba(52, 61, 85, 0.7);




ということになります。