我們把上一節(jié)的作業(yè)的答案給大家公布一下：
本節(jié)課所使用的背景圖片素材
使用背景(background)是網(wǎng)頁設(shè)計(jì)制作中一種常用手法，網(wǎng)站中隨處可見的導(dǎo)航，整體頁面背景都是通過background完成的。
我們先看一下背景的顏色屬性（background-color）,我們可以采用的值：十六進(jìn)制，顏色名稱，透明的背景.
現(xiàn)在我們通過一個示例來了解一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8背景顏色示例</title>
<style type="text/css">
/*這是CSS的備注形式。為了以后閱讀方便，如果顏色值一樣可以簡寫為#ccc; */
h1 {background-color:#cccccc; }
h2{background-color:red;}
/*是默認(rèn)效果，可以不寫*/
h3{background-color:trasparent;}
</style>
</head>
<body>
<h1>十六進(jìn)制示例</h1>
<h2>顏色名稱</h2>
<h3>透明背景</h3>
</body>
</html> PS：顏色值大家可以通過PS去獲取，也可以通過百度搜索獲取
在我們網(wǎng)頁中不只可以使用背景顏色，還可以使用背景圖片屬性background-image定義背景圖象的路徑。但是最好在結(jié)合背景圖象的重復(fù)屬性background-repeat定義背景圖象的是否重復(fù)效果。
最重要的：背景圖象只有在一定的區(qū)域范圍內(nèi)才能顯示，所以在指定背景圖象的時候，通常要定義元素的寬高屬性；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.divcss.com背景示例</title>
<style type="text/css">
div{background-image:url(3_01.gif); }
</style>
</head>
<body>
<div>內(nèi)容1</div>
</body>
</html>
現(xiàn)在這種情況下。背景圖片會鋪滿整個屏幕。但是不會有高度顯示
這個問題就是我剛才所重點(diǎn)提到的背景圖象只有在一定的區(qū)域范圍內(nèi)才能顯示.所以說我們可以給DIV指定一個寬(width)與高(height),為了讓大家看的更清楚些。我提供一個邊框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.divcss.com背景示例</title>
<style type="text/css">
div{background-image:url(divcss801.gif); width:500px;height:500px;border:2px solid #f00;}
</style>
</head>
<body>
<div>內(nèi)容1</div>
</body>
</html>
大家不知道發(fā)現(xiàn)沒。如果使用我們提供的圖片做背景，會出現(xiàn)完全平鋪。因?yàn)槲覀兊谋尘皥D片只有寬184PX，高384PX。這也是默認(rèn)情況。所以說我們可以通過background-repeat這個屬性決定背景圖片如何平鋪。
background-repeat：是指定元素中背景圖象的重復(fù)方式。有以下幾種取值方式：
Repeat:完全平鋪；默認(rèn)情況下,我們可以忽略不寫
no-repeat：在X與Y均不平鋪；
repeat-x：X平鋪；
repeat-y：Y軸平鋪；
大家可以對上述代碼做個修改。
background-position：設(shè)置背景圖片在一定區(qū)域內(nèi)的顯示的位置，這個屬性需要設(shè)置兩個值，一個是X水平，一個垂直位置，可以使用%，也可使用具體的數(shù)值PX，也可以使用：top left|top center |top right | center left | bottom left這樣結(jié)合
我們看一個示例：
<html>
<head>
<style type="text/css">
div
{
width:400px;height:400px;border:2px solid #f00;
background-image:url(css8bj.jpg);
background-repeat:no-repeat;
background-position:top right;
}
</style>
</head>
<body>
<body>
<div>
<p>在這個示例的圖片寬是208px，高是120px，在我們不平鋪的時候，默認(rèn)是DIV的左上角，如果按我們樣式所設(shè)置則在頂部右上角，當(dāng)然你也可以使用百分比和PX值進(jìn)行</p>
</div>
</body>
</body>
</html>
在上述代碼情況下如果我們想讓我們上邊的背景圖片不顯示第一行與第一列怎么辦呢。我們還可以為背景位置設(shè)置負(fù)的值
<html>
<head>
<style type="text/css">
div
{
width:400px;height:400px;border:2px solid #f00;
background-image:url(css8bj.jpg);
background-repeat:no-repeat;
background-position:-73px -38px;
}
</style>
</head>
<body>
<body>
<div>
<p>在這個示例的圖片寬是208px，高是120px，在我們不平鋪的時候，默認(rèn)是DIV的左上角，73px -38px，我們使用負(fù)的值是為了向左偏移以及向上偏移</p>
</div>
</body>
</body>
</html>
而且我們的背景圖片也可以結(jié)合顏色在一塊來用，當(dāng)背景圖片沒有顯示的時候就用顏色進(jìn)行填充。我們現(xiàn)在看一個示例。
<html>
<head>
<style type="text/css">
body
{
background-image:url(divcss801.gif);
background-repeat:repeat-x;
background-position:0 0
background-color:#055269;
}
</style>
</head>
<body>
<body>
<div>
<p>我們網(wǎng)頁背景沿X軸平鋪的時候，如果沒有占滿其它地方可以用背景顏色代替</p>
</div>
</body>
</body>
</html>
這個地方的背景顏色取值是根據(jù)背景圖片決定的。大家可以用PS看一下這個背景圖片最下方的顏色是不是我們現(xiàn)在使用的。
我們學(xué)了之前這么多內(nèi)容，其實(shí)背景還可以簡寫，形式如下：
Background:background-color顏色 | background-image背景圖片路徑 | background-repeat 是否平鋪 | background-position 位置| background-attachment 是否滾動
強(qiáng)調(diào)一下：在使用簡寫的時候必須是Background，如果是用bakcground-image:只能寫圖片位置，不能再加其它。那么我看一個示例
<html>
<head>
<style type="text/css">
body
{
background:#055269 url(divcss801.gif) repeat-x 0 0;
}
</style>
</head>
<body>
<body>
<div>
<p>我們的背景沿X軸平鋪的時候，如果沒有占滿其它地方可以用背景顏色代替</p>
</div>
</body>
</body>
</html>
