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