背景

background-color

background-color は、要素の背景の色を指定します。背景画像やグラデーションがあるときは、その下に塗られます。

構文

<color>

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  border: 8px dashed #4a86cb;
  background-color: #88d1c7;
}

background-color#88d1c7

color と同じように、名前・16 進数・rgb() などの関数で書けます。初期値は透明（transparent）です。currentcolor と書くと、その要素の文字の色で塗ります。

初期値では枠線の下まで塗られます。このページのプレビューでも、破線の隙間から背景色が見えています。枠線の内側までにしたいときは background-clip: padding-box にします。角丸（border-radius）を付けると、背景色もその形に切り取られます。

背景色は 1 色だけで、いつも一番下に塗られます。background-image の画像やグラデーションはその上に重なるので、画像の透明な部分や、画像が届いていない部分から背景色が見えます。

継承しません。初期値が透明なので、背景色を書いていない要素からは親の背景が透けて見えます。
あとから background ショートハンドを書くと、そこに書かなかった背景色も transparent に戻ります。ショートハンドの中に色も書くか、background-color をショートハンドより後に書きます。
半透明の色にすると背景だけが透けます。opacity は文字や中の要素ごと透けます。