文字の背景色を指定する
background-colorプロパティは、背景の色を指定します。
色の値として「transparent」を指定すると、背景が透明になって下の背景が透けて見えるようになります。ここで設定した色はボックスのマージン（常に透明）には適用されません。
背景色だけを指定していると、ユーザーが設定画面や独自のスタイルシートで文字色を指定している場合などに、文字が読みにくくなってしまう場合があります。そのようなことを避けるために、背景色を指定する場合には文字色も指定するようにしてください。CSSソース
body {
margin: 2em;
color: #ffffff;
background-color: #FFFFCC
}
h1 {
text-align: center;
color: #ffffff;
background-color: #000000
}
p {
padding: 1em;
color: #000000;
background-color: #FFCC99
}
div {
padding: 1em;
color: #000000;
background-color: #ffffff
}
table, input {
color: #ffffff;
background-color: #ff3300
}
caption, select {
color: #ffffff;
background-color: #333399
}
textarea {
color: #ffffff;
background-color: #33FF99
}HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>背景色を指定する</title>
<link href="../assets/style_sheets/29-01.css" rel="stylesheet" type="text/css">
</head>
<body>
</head>
<body onLoad="MM_preloadImages('../assets/images/btn_tec02.gif')">
<div align="center"><img src="../assets/images/csslogo.gif" width="364" height="39">
</div>
<h1>h1要素</h1>
<p>
スタイルシートを使用すると、さまざまな要素の背景色を自由に設定することができます。
</p>
<div>
<table border="2" cellpadding="8">
<caption>table要素</caption>
<tr><th>ヘッダセル</th><th>ヘッダセル</th><th>ヘッダセル</th></tr>
<tr><td>データセル</td><td>データセル</td><td>データセル</td></tr>
</table>
<p>
<textarea rows="4" cols="50">textarea要素</textarea>
</p>
<p>
<input type="text" value="input要素">
<input type="checkbox" name="chk" checked>
<input type="checkbox" name="chk">
<input type="radio" name="rdo" checked>
<input type="radio" name="rdo">
<select>
<option>select要素</option>
<option>option要素</option>
</select>
<input type="button" value="button">
</p>
</div>
</body>
</html>
