定義背景圖片的位置
默認情況下，背景圖片都是從設置了back-ground屬性的標記的左上角開始出現，但實際制作網頁過程中，可能希望圖片出現在指定的位置。在CSS中使用background-position來調整圖片的位置，該屬性用法如下：
background-position: position|數值
在網頁設計中，position可以是center、center center、top left、top center、top right、center left、cen-ter right、bottom left、bottom center、bottomright；數值可以是百分數，如background-posi-tion:40% 60%，表示背景圖片的中心點在網頁設計時水平方向上處于40%的位置，在豎直方向上處于60%的位置，此時如果改變瀏覽器的大小，背景圖片也會相應地調整，但始終處于40%和60%的位置，除了百分數，還可以是具體的數值，如background-posi-tion:200px 40px，表示距離頁面左側200px，距離頁面頂部40px，但是此時如果瀏覽器大小改變，圖片不會做出相應調整，可能會出現圖片顯示不全的現象。
【示例】啟動Dreamweaver，新建一個網頁，保存為test.html，在<head>標簽內添加<styletype="text/css">標簽，定義一個內部樣式表，然后輸入下面樣式：
body{ /*頁面基本屬性*/ padding:0px;
margin:0px;
background-image:url(images/1.jpg); /*背景圖片*/
background-repeat:no-repeat; /*不重復*/
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>標簽中輸入如下代碼：
<h1>可愛的企鵝</h1>
<p>去南極，第一個想到的就是企鵝，那毛茸茸的肉嘟嘟的樣子非?？蓯?。我們第一次登陸就是去看它，興奮的心情和期待的心情交織在一起，但是，真正踏上南極半島的一瞬間不是因為看到企鵝而興奮，而是因為企鵝在自己的腳邊而驚訝?！?lt;/p>
顯示結果如圖所示。從圖中可以看出，圖片位于頁面右下方。
當前文章標題：定義背景圖片的位置
當前URL：http://www.free-network.cn/news/wzzz/3152.html
上一篇：網頁設計中背景圖片的重復
下一篇：在網頁設計中設置帶花紋邊框（一）
