用CSS控制背景圖像
在網(wǎng)頁(yè)設計時(shí)，CSS可設置背景圖片的樣式。任何一個(gè)頁(yè)面，都有它的背景色或背景圖來(lái)突出其基調，本節將通過(guò)實(shí)例介紹背景圖片的樣式設置。
定義背景圖片
CSS使用background-image屬性來(lái)定義背景圖片樣式，在網(wǎng)站建設時(shí)，該屬性用法如下：
background-image: url;
其作用是給頁(yè)面添加背景圖片，其中url是圖片的路徑，可以是絕對路徑，也可以是相對路徑。導入的圖片其默認屬性是在橫向和縱向上重復，如果不希望重復，則需要設置no-repeat屬性，其具體用法會(huì )在下面講到。
【示例1】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，輸入以下內容：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<title>背景圖片</title>
<style>body { background-image: url(images/bg.jpg); /*頁(yè)面背景圖片*/ }
</style>
</head>
<body>
</body>
</html>
以上代碼中，圖片默認會(huì )在橫向和縱向上重復，本例中圖片的原型如圖9.85所示。其在網(wǎng)頁(yè)中平鋪的效果如圖9.86所示。
如果在設計網(wǎng)頁(yè)時(shí)使用的背景圖片是GIF格式的透明圖片，那么此時(shí)如果再設置網(wǎng)頁(yè)的背景顏色background-color，則背景圖片和背景顏色將同時(shí)生效。
【示例2】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test1.html，輸入以下內容：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<title>背景圖片</title><style>body {
background-image: url(images/bg1.gif); /*頁(yè)面背景圖片*/
background-color: #A7D3A0; /*頁(yè)面背景顏色*/}
</style>
</head>
<body>
</body>
</html>
其顯示結果可以看到淡綠色的背景顏色和背景圖片同時(shí)顯示在網(wǎng)頁(yè)中。
當前文章標題：用CSS控制背景圖像
當前URL：http://amzcoolest.com/news/wzzz/3150.html
上一篇：Banner實(shí)例展示
