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