ページ全体やボックスに背景色を指定する方法をまとめました。
半透明にしたり、グラデーションをつけたりもできます。
背景色を指定する
ページやボックスの背景を塗りつぶす
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}
背景を半透明にする
背景を半透明する方法は 特に難しいことはなく、色を rgba() で指定するだけです。
rgba() の4番目の値で 0~1.0の実数で透明度(0%~100%)を指定します。
CSS
.box1 { background-color : skyblue }
.box3 { background-color : rgba(246,202,6,0.5) }
要素を半透明にする
opacityプロパティで 0~1.0の実数を指定することで 要素を半透明にすることができます。
要素自体を半透明にするので その要素内容の文字や、子要素も半透明になります。
CSS
.box1 { background-color : skyblue }
.box4 { background-color : gold ; 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 | 角度を指定したグラデーション |
いろいろなパターンを見たほうが早いと思うので、サンプルをいくつかのせておきます。
skyblue,
pink
skyblue,
pink
skyblue,
pink
skyblue 50%,
pink
skyblue 40%,
pink 60%
skyblue 40%,
pink 60%
3色以上のグラデーション
3色以上でのグラデーションは単純に後ろに「,」で区切って色を追加してやればOKです。
CSS
background : linear-gradient( 方向, 始点の色 位置, 終点の色 位置, 追加色, 追加色,… )
skyblue,
pink,
gold
skyblue,
pink,
gold,
lime
円状のグラデーションをつける
「radial-gradient()」を使って円状のグラデーションをつけられます。
「linear-gradient()」と考え方は同じです。
CSS
background : radial-gradient(中央の色 位置, 外側の色 位置 )
pink
pink 60%
pink,
gold
transparent 60%
iOS Safari での transparent に注意!
グラデーションで transparent を使って透明にしようとすると Safari では 黒っぽくなってしまうので注意が必要です。
これを回避するには、上の例なら 「transparent」ではなく「rgba(135, 206, 235, 0)」にすればいいようです。
rgba(135, 206, 235, 0) 60%