background-color

概要

background-color は、色名、カラーコード、あるいは transparent キーワードで要素の背景色を設定する CSS プロパティです。

• 初期値 transparent
• 適用対象 全要素
• 継承 継承しない
• 相対値の基準 無し
• メディア visual
• 計算値 指定値

構文

background-color: color | transparent | inherit

値

color

構文中の color には RGB、HSL、RGBA、HSLA、16 進記法の RGB、または定義済の色名で指定できます。background-image プロパティによって背景画像が設定されている場合、ここで指定した背景色は背景画像の透過部分のレンダリングに影響を与えます。

例

実際の表示を確認

.exampleone {
  background-color: blue;
  color: white;
}

.exampletwo {
  background-color: rgb(255,250,230);
  color: rgb(30,20,20);
}

.examplethree {
  background-color: #334;
  color: #F8f8FF;
}

【訳注: スタイルシートが複雑になる程、文字色を指定する場合、その要素にどのような背景色が継承されているか把握しきれなくなる事があります。あるいは要素自身の背景色が透明であったならば、親要素等の背後のレイヤーの背景色が想定と異なるかもしれません。組み合わせによっては文字が読めなくなってしまう事があるかもしれません。そういった事態を避ける為、基本的に背景色と文字色はセットで指定する様にすると良いでしょう。】

仕様

ブラウザ実装状況

関連情報

• 色に指定可能な値
• 背景関連 CSS プロパティ : background 、 background-attachment 、 background-clip 、 background-color 、 background-image 、 background-origin 、 background-position 、 background-repeat 、 background-size
• 複数の背景