《CSS教程》06章 背景的设定

背景设置的范围是第一章示意图中border范围之内包括border。


背景颜色 
background-color: 颜色值

s06_01.htm

【CSS】
body {
  margin: 2em;
  color: #ffffff;
  background-color: #ff3300
}
h1 {
  text-align: center;
  color: #ffffff;
  background-color: #000000
}
p {
  padding: 1em;
  color: #000000;
  background-color: #ffcc00
}
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: #339933
}

【HTML】
<body>
<h1>h1元素</h1>

<p>
使用CasteStyleSheet可以自由地设置各元素的背景。</p>

<div>
<table border="2" cellpadding="8">
<caption>table元素</caption>
<tr><th>Head单元</th><th>Head单元</th><th>Head单元</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>

背景图象 
background-image: url

s06_02.htm

【CSS】
body {
  margin: 2em;
  color: #ffffff;
  background-color: #ff3300;
  background-image: url(red.jpg)
}
h1 {
  text-align: center;
  color: #ffffff;
  background-color: #000000;
  background-image: url(black.jpg)
}
p {
  padding: 1em;
  color: #000000;
  background-color: #ffcc00;
  background-image: url(yellow.gif)
}
div {
  padding: 1em;
  color: #000000;
  background-color: #ffffff;
  background-image: url(white.jpg)
}
table, input {
  color: #ffffff;
  background-color: #ff3300;
  background-image: url(red.jpg)
}
caption, select {
  color: #ffffff;
  background-color: #333399;
  background-image: url(blue.gif)
}
textarea {
  color: #ffffff;
  background-color: #339933;
  background-image: url(green.jpg)
}

【HTML】
<body>
<h1>h1元素</h1>

<p>
使用CasteStyleSheet可以自由地设置各元素的背景。</p>

<div>
<table border="2" cellpadding="8">
<caption>table元素</caption>
<tr><th>Head单元</th><th>Head单元</th><th>Head单元</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>

背景图象的排列 
background-repeat: 排列方式
排列方式：
    repeat       横向纵向平铺（缺省值）
    repeat-x     横向平铺
    repeat-y     纵向平铺
    no-repeat    单独一个不平铺

s06_03_1.htm  s06_03_2.htm  s06_03_3.htm  s06_03_4.htm

【CSS】
body {
  color: #ff6600;
  background-color: #ffffff;
  background-image: url(back.gif);
  background-repeat: no-repeat
}
h1 { text-align: right }

【HTML】
<body>
<h1>no-repeat</h1>
</body>

背景图象的位置 
background-position:  图象位置
图象位置：
    横向、纵向位置：  从左上起带单位的数值或百分比%
    横向、纵向位置：  left, right, center, top, bottom

s06_04_1.htm  s06_04_2.htm

【CSS】
body {
  color: #000000;
  background-color: #ffffff;
  background-image: url(logo.gif);
  background-repeat: no-repeat;
  background-position: center center
} 

【HTML】
<body>
<p>center center = 50% 50%</p>
</body>

背景图象的固定 
background-attachment:  是否固定
是否固定：
    fixed       背景图象的位置固定
    scroll      背景图象和其它内容一起滚动

s06_05.htm

【CSS】
body {
  color: #000000;
  background-color: #ffffff;
  background-image: url(hirame.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: 100px;
  text-align: right
}
p { line-height: 2em }

【HTML】
<body>
<h1>背景图象的固定</h1>
<p>
吉日兮辰良，穆将愉兮上皇；<br>
抚长剑兮玉珥，『谬』①锵鸣兮琳琅；
</p>
<p>瑶席兮玉『缜』②，盍将把兮琼芳；<br>
蕙肴蒸兮兰藉③，莫桂酒兮椒浆；<br>
扬『包』④兮拊鼓，疏缓节兮安歌；<br>
陈竽瑟兮浩倡；
</p>
<p>
灵偃蹇兮姣服，芳菲菲兮满堂；<br>
五音兮繁会，君欣欣兮乐康。
</p>
<hr>
 注释：<br>
      ①：字形应为“王”旁，音“求”。<br>
      ②：字形应为“王”旁，音“阵”。<br>
      ③：音“界”。<br>
      ④：字形应带“木”旁，音“福”。<br>
<p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</p>
</body>

背景图象的一次性设置 
background:  与背景有关的属性值

s06_06.htm

【CSS】
body {
  color: #000000;
  background: #ffffff url(back.gif) right repeat-y
}

【HTML】
<body>

</body>