background要素の背面を塗る
contentとpaddingの領域へ広がり、borderの内側までを単色で塗ります。
background-color
要素の背景を単色で塗るプロパティ。文字色との違いと、透明な背景も見比べます。
遊んでみよう
BACKGROUND背景色
CSS
.element background-color: #ffc4b7;
値のパターン
background-colorの構成要素
transparent初期値は透明
transparentなら、背後にある親要素やページの色がそのまま見えます。
color文字色とは別
文字はcolor、背景はbackground-colorで分けて指定します。
早見表
単色の背景にはbackground-color。グラデーションはbackground-imageの役割です。
01
#ffc4b7HEX16進数02
lightblue色名キーワード03
rgb(255 196 183)RGB光の3原色04
transparent透明初期値よくある使い方
01
カードを面で分ける
うすい背景色を使うと、境界線がなくても内容のまとまりをつくれます。
background-color: #fffefa;02
ボタンを目立たせる
文字色と十分な差がある背景を使い、主要な操作を見つけやすくします。
background-color: #dafa65;03
状態ラベルを塗る
小さなラベルへ背景色をつけ、情報の種類を見分けやすくします。
background-color: #d9d2ff;ポイント
グラデーションはbackground-colorでは作らない。
background-colorが扱うのは単色です。線形や放射状のグラデーションを使う場合は、background-imageへlinear-gradient()などを指定します。
関連するCSSも見てみよう。
background-color と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。