*背景圖片定位應用*背景圖片定位應用
在制作網(wǎng)頁時，我們經(jīng)常要用到背景圖片。但是，有的圖片過寬過大，我們只想在網(wǎng)頁中顯示原圖片的一部分。這該怎么辦呢？
本篇文章，我們就來探討一下這個問題。
例如：下面的圖片，原圖的寬度是910px，高度是1365px。
<img title="" alt="" src="http://image79.360doc.com/DownloadImg/2014/11/1814/47221139_7.jpg">我們先把圖片的“地址”黏貼到“表格標簽”中“背景圖片地址”的位置中。
代碼如下：
<table id="table2" border="0" width="910" background="http://image79.360doc.com/DownloadImg/2014/11/1814/47221139_7.jpg" height="1365"><tbody><tr><td></td></tr></tbody></table>
然后，在表格標簽中添加這樣一句css樣式：
style="BACKGROUND-POSITION: 60px 50px"
上面的css樣式，就是背景圖片定位的代碼。樣式中的兩個參數(shù)，第一個是控制水平方向的，第二個是控制垂直方向的。
添加css樣式以后的代碼如下：
<table style="BACKGROUND-POSITION: 60px 50px" id="table2" border="0" width="910" background="http://image79.360doc.com/DownloadImg/2014/11/1814/47221139_7.jpg" height="1365"><tbody><tr><td></td></tr></tbody></table>
如果我們不想讓原圖片中美女左面的那一部分圖片顯示，就把控制水平方向的參數(shù)修改為負值。這個負值的大小，可自己修改并觀察其顯示效果而取得。這個負值的絕對值是多少px，就把表格標簽中的寬度減小多少px。
修改css樣式以后的代碼如下：
<table style="BACKGROUND-POSITION: -210px 0px" id="table2" border="0" width="700" background="http://image79.360doc.com/DownloadImg/2014/11/1814/47221139_7.jpg" height="1365"><tbody><tr><td></td></tr></tbody></table>
看看效果，原圖片中美女左面的那一部分圖片被剪切了吧！
如果我們不想讓原圖片中美女右面的那一部分圖片顯示，就把表格標簽中的寬度再減小適當?shù)膶挾劝伞?div style="height:15px;">
修改以后的代碼如下：
<table style="BACKGROUND-POSITION: -210px 0px" id="table2" border="0" width="350" background="http://image79.360doc.com/DownloadImg/2014/11/1814/47221139_7.jpg" height="1365"><tbody><tr><td></td></tr></tbody></table>
如果我們不想讓原圖片中美女上面的那一部分圖片顯示，就把控制垂直方向的參數(shù)修改為負值。這個負值的絕對值是多少px，就把表格標簽中的高度值減小多少px。
修改以后的代碼如下：
<table style="BACKGROUND-POSITION: -210px -250px" id="table2" border="0" width="350" background="http://image79.360doc.com/DownloadImg/2014/11/1814/47221139_7.jpg" height="1115"><tbody><tr><td></td></tr></tbody></table>
應用背景圖片的定位，可以制作出漂亮的網(wǎng)頁來。舉例如下：
網(wǎng)頁一網(wǎng)頁二網(wǎng)頁三網(wǎng)頁四精美網(wǎng)頁任您選☆代碼學習群教程☆我的原創(chuàng)作品☆我的精品文章☆邊框制作與欣賞☆百荷音畫集錦☆精美邊框任您選☆介紹幾個音畫網(wǎng)站精美頂圖任您選☆教您制作圖書館頂圖☆佳作賞析☆百荷音畫收藏方法
☆兩 性 健 康☆美女導航☆聲音播放器☆網(wǎng)頁特效☆中醫(yī)瑰寶☆在線制作☆制作一寸照片☆修改照片背景☆卷軸畫制作☆性愛與婚姻☆ps矩形選框工具☆ps套索工具☆ps教程匯集更多精彩 更多期待 “春天沒來”編撰
2015年4月14日于北京
