CSS背景色プロパティ
例
ページの背景色を設定します。
body {background-color: coral;}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
プロパティは、要素のbackground-color
背景色を設定します。
要素の背景は、パディングと境界線を含む要素の合計サイズです(マージンは含まれません)。
ヒント:テキストを読みやすくするために、背景色とテキストの色を使用してください。
デフォルト値: | トランスペアレント |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS1 |
JavaScript構文: | オブジェクト.style.backgroundColor = "#00FF00" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
background-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS構文
background-color: color|transparent|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
color | Specifies the background color. Look at CSS Color Values for a complete list of possible color values. | |
transparent | Specifies that the background color should be transparent. This is default | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
HEX値で背景色を指定します。
body {background-color: #92a8d1;}
例
RGB値で背景色を指定します。
body {background-color: rgb(201, 76, 76);}
例
RGBA値で背景色を指定します。
body {background-color: rgba(201, 76, 76, 0.3);}
例
HSL値で背景色を指定します。
body {background-color: hsl(89, 43%, 51%);}
例
HSLA値で背景色を指定します。
body {background-color: hsla(89, 43%, 51%, 0.3);}
例
さまざまな要素の背景色を設定します。
body {
background-color: #fefbd8;
}
h1 {
background-color: #80ced6;
}
div {
background-color: #d5f4e6;
}
span {
background-color: #f18973;
}
関連ページ
CSSチュートリアル:CSSの背景
HTML DOMリファレンス:backgroundColorプロパティ