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