定義背景圖片的位置
默認情況下，背景圖片都是從設置了back-ground屬性的標記的左上角開(kāi)始出現，但實(shí)際制作網(wǎng)頁(yè)過(guò)程中，可能希望圖片出現在指定的位置。在CSS中使用background-position來(lái)調整圖片的位置，該屬性用法如下：
background-position: position|數值
在網(wǎng)頁(yè)設計中，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%，表示背景圖片的中心點(diǎn)在網(wǎng)頁(yè)設計時(shí)水平方向上處于40%的位置，在豎直方向上處于60%的位置，此時(shí)如果改變?yōu)g覽器的大小，背景圖片也會(huì )相應地調整，但始終處于40%和60%的位置，除了百分數，還可以是具體的數值，如background-posi-tion:200px 40px，表示距離頁(yè)面左側200px，距離頁(yè)面頂部40px，但是此時(shí)如果瀏覽器大小改變，圖片不會(huì )做出相應調整，可能會(huì )出現圖片顯示不全的現象。
【示例】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標簽內添加<styletype="text/css">標簽，定義一個(gè)內部樣式表，然后輸入下面樣式：
body{ /*頁(yè)面基本屬性*/ 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>可愛(ài)的企鵝</h1>
<p>去南極，第一個(gè)想到的就是企鵝，那毛茸茸的肉嘟嘟的樣子非?？蓯?ài)。我們第一次登陸就是去看它，興奮的心情和期待的心情交織在一起，但是，真正踏上南極半島的一瞬間不是因為看到企鵝而興奮，而是因為企鵝在自己的腳邊而驚訝?！?lt;/p>
顯示結果如圖所示。從圖中可以看出，圖片位于頁(yè)面右下方。
當前文章標題：定義背景圖片的位置
當前URL：http://amzcoolest.com/news/wzzz/3152.html
