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

HTML/CSS

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

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

 

スポンサーリンク

背景色を指定する

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

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

CSS

body { background-color : pink }
.box1 { background-color : skyblue}
ブラウザ

 

 

無色透明

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

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

CSS

.box1 { background-color : skyblue }
.box2 { background-color : tranparent; border : dashed 1px}
ブラウザ
transparent

 

背景を半透明にする

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

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

CSS

.box1 { background-color : skyblue }
.box3 { background-color : rgba(246,202,6,0.5) }
ブラウザ
透明度 50%

 

要素を半透明にする

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

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

CSS

.box1 { background-color : skyblue }
.box4 { background-color : gold ; opacity : 0.5 }
ブラウザ
opacity : 0.5

 

スポンサーリンク

グラデーション

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

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

CSS

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

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

to top上へ向かうグラデーション
to bottom下へ向かうグラデーション
to left左へ向かうグラデーション
to right右へ向かうグラデーション
to top right右上へ向かうグラデーション
to bottom right右下へ向かうグラデーション
to top left左上へ向かうグラデーション
to bottom left左下へ向かうグラデーション
〇deg角度を指定したグラデーション

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

ブラウザ
to right,
skyblue,
pink
to bottom,
skyblue,
pink
to bottom right,
skyblue,
pink
to right,
skyblue 50%,
pink
10deg,
skyblue 40%,
pink 60%
100deg,
skyblue 40%,
pink 60%

 

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

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

CSS

background : linear-gradient( 方向, 始点の色 位置, 終点の色 位置, 追加色, 追加色,… )
ブラウザ
to right,
skyblue,
pink,
gold
to right,
skyblue,
pink,
gold,
lime

 

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

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

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

CSS

background : radial-gradient(中央の色 位置, 外側の色 位置 )
ブラウザ
skyblue,
pink
skyblue 40%,
pink 60%
skyblue,
pink,
gold
skyblue,
transparent 60%

 

iOS Safari での transparent に注意!

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

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

ブラウザ
skyblue,
rgba(135, 206, 235, 0) 60%