背景に色を加えたいけどやり方がわからない・・・
また、背景の色を半透明にしたい！という方へ
今回は、background-colorの使い方と、background-colorを使って背景を半透明にする方法について解説したいと思います。
background-colorの使い方と背景を半透明にする方法
まずは、background-colorの使い方について解説していきます。
背景を半透明にする方法を知りたいという方は、飛ばしていただいて大丈夫です。
background-colorの使い方
百聞は一見にしかずということで、
まずは、以下のデモをご覧ください！
See the Pen ZEOzQwm by ryu (@ryu-no-sss) on CodePen.
このように、『background-color: red;』と指定します。
色の指定方法は、
・英単語で指定・・・『red』『blue』『black』など
・カラーコードで指定・・・『#f3f3f3』のように『#3〜6桁の英数字』で指定する
・rgbaで指定・・・『rgba(255,255,255,1)』のように指定する。
・transparentで指定・・・背景を透明に指定する。
また、デモの5つ目にあるグラデーションに関しては、『background: linear-gradient(〜);』のように記載しましょう！
background-colorでは、グラデーションは設定できません。
背景を半透明にする方法
背景を半透明にするためには、rgbaを使います。
まずは、以下のデモをご覧ください。
See the Pen VwjZaKm by ryu (@ryu-no-sss) on CodePen.
このように、rgbaの4つ目の値を設定することで、背景を半透明にすることができます。
また、4つ目の値は『0〜1』の間で調整でき、0に近づくにつれ透明度が高くなります。
このrgbaとは、『background-color: rgba(赤色の値/緑色の値/青色の値/透明度);』の順番で値を設定し、色を指定します。
rgbaに関しては、以下の記事でわかりやすく解説していますので、こちらもぜひ！
まとめ
・『background-color: 色を指定;』のように記載する。
・背景を半透明にしたい場合は、rgbaを使う。
それでは、最後まで読んでいただきありがとうございました。
