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