定義背景圖片的位置
默認(rèn)情況下，背景圖片都是從設(shè)置了back-ground屬性的標(biāo)記的左上角開始出現(xiàn)，但實(shí)際制作網(wǎng)頁過程中，可能希望圖片出現(xiàn)在指定的位置。在CSS中使用background-position來調(diào)整圖片的位置，該屬性用法如下：
background-position: position|數(shù)值
在網(wǎng)頁設(shè)計中，position可以是center、center center、top left、top center、top right、center left、cen-ter right、bottom left、bottom center、bottomright；數(shù)值可以是百分?jǐn)?shù)，如background-posi-tion:40% 60%，表示背景圖片的中心點(diǎn)在網(wǎng)頁設(shè)計時水平方向上處于40%的位置，在豎直方向上處于60%的位置，此時如果改變?yōu)g覽器的大小，背景圖片也會相應(yīng)地調(diào)整，但始終處于40%和60%的位置，除了百分?jǐn)?shù)，還可以是具體的數(shù)值，如background-posi-tion:200px 40px，表示距離頁面左側(cè)200px，距離頁面頂部40px，但是此時如果瀏覽器大小改變，圖片不會做出相應(yīng)調(diào)整，可能會出現(xiàn)圖片顯示不全的現(xiàn)象。
【示例】啟動Dreamweaver，新建一個網(wǎng)頁，保存為test.html，在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽，定義一個內(nèi)部樣式表，然后輸入下面樣式：
body{ /*頁面基本屬性*/ padding:0px;
margin:0px;
background-image:url(images/1.jpg); /*背景圖片*/
background-repeat:no-repeat; /*不重復(fù)*/
background-position:bottom right; /*背景位置，右下*/
background-color:#0066CC;}p{ /*段落樣式*/
line-height:1.6em;
margin:0px; font-size:14px;
padding-top:10px;
padding-left:6px;
padding-right:8px;}
然后在<body>標(biāo)簽中輸入如下代碼：
<h1>可愛的企鵝</h1>
<p>去南極，第一個想到的就是企鵝，那毛茸茸的肉嘟嘟的樣子非常可愛。我們第一次登陸就是去看它，興奮的心情和期待的心情交織在一起，但是，真正踏上南極半島的一瞬間不是因?yàn)榭吹狡簌Z而興奮，而是因?yàn)槠簌Z在自己的腳邊而驚訝?！?lt;/p>
顯示結(jié)果如圖所示。從圖中可以看出，圖片位于頁面右下方。
