background-color

概要

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

構文

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 Backgrounds and Borders Module Level 3 勧告候補 有意な変更点は無し
CSS 2.1 勧告  
CSS 1 (※日本語訳 勧告  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 (1.9.2) (有) (有) (有) (有)

関連情報

Document Tags and Contributors

Contributors to this page: maco81, ijokarumawak, ethertank, Yuichiro
最終更新者: ethertank,
サイドバーを隠す