【CSS】背景色を単色、半透明、グラデーションにする方法

ページ全体やボックスに背景色を指定する方法をまとめました。

半透明にしたり、グラデーションをつけたりもできます。

背景色を指定する

ページやボックスの背景を塗りつぶす

background-colorプロパティを使って値に色を指定します。

body { background-color : pink }
.box1 { background-color : skyblue}

無色透明

background-colorプロパティの値に「transparent」を指定すると無色透明になります。

background-colorは すべての要素に指定できますが、初期値は「transparent」つまり無色透明になります。

.box1 { background-color : skyblue }
.box2 { background-color : tranparent; border : dashed 1px}

背景を半透明にする

背景を半透明する方法は 特に難しいことはなく、色を rgba() で指定するだけです。

rgba() の4番目の値で 0~1.0の実数で透明度（0%～100%）を指定します。

.box1 { background-color : skyblue }
.box3 { background-color : rgba(246,202,6,0.5) }

要素を半透明にする

opacityプロパティで 0~1.0の実数を指定することで 要素を半透明にすることができます。

要素自体を半透明にするので その要素内容の文字や、子要素も半透明になります。

.box1 { background-color : skyblue }
.box4 { background-color : gold ; opacity : 0.5 }

グラデーション

線状のグラデーションをつける

backgroundのプロパティ値 (background-color ではなく background) に 「linear-gradient()」を使って細かい条件を指定していきます。指定方法は下のとおり。

background : linear-gradient( 方向, 始点の色 位置, 終点の色 位置 )

方向の指定方法は下のとおり。

いろいろなパターンを見たほうが早いと思うので、サンプルをいくつかのせておきます。

3色以上のグラデーション

3色以上でのグラデーションは単純に後ろに「,」で区切って色を追加してやればOKです。

background : linear-gradient( 方向, 始点の色 位置, 終点の色 位置, 追加色, 追加色,… )

円状のグラデーションをつける

「radial-gradient()」を使って円状のグラデーションをつけられます。

「linear-gradient()」と考え方は同じです。

background : radial-gradient(中央の色 位置, 外側の色 位置 )

iOS Safari での transparent に注意！

グラデーションで transparent を使って透明にしようとすると Safari では 黒っぽくなってしまうので注意が必要です。

これを回避するには、上の例なら 「transparent」ではなく「rgba(135, 206, 235, 0)」にすればいいようです。