定義背景圖片的位置
默認情況下，背景圖片都是從設置了back-ground屬性的標記的左上角開始出現(xiàn)，但實際制作網(wǎng)頁過程中，可能希望圖片出現(xiàn)在指定的位置。在CSS中使用background-position來調整圖片的位置，該屬性用法如下：
background-position: position|數(shù)值
在網(wǎng)頁設計中，position可以是center、center center、top left、top center、top right、center left、cen-ter right、bottom left、bottom center、bottomright；數(shù)值可以是百分數(shù)，如background-posi-tion:40% 60%，表示背景圖片的中心點在網(wǎng)頁設計時水平方向上處于40%的位置，在豎直方向上處于60%的位置，此時如果改變?yōu)g覽器的大小，背景圖片也會相應地調整，但始終處于40%和60%的位置，除了百分數(shù)，還可以是具體的數(shù)值，如background-posi-tion:200px 40px，表示距離頁面左側200px，距離頁面頂部40px，但是此時如果瀏覽器大小改變，圖片不會做出相應調整，可能會出現(xiàn)圖片顯示不全的現(xiàn)象。
【示例】啟動Dreamweaver，新建一個網(wǎng)頁，保存為test.html，在<head>標簽內(nèi)添加<styletype="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式：
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://51zuanshi.com.cn/news/wzzz/3152.html
