*背景圖片定位應用

06-23

*背景圖片定位應用*背景圖片定位應用

在製作網頁時，我們經常要用到背景圖片。但是，有的圖片過寬過大，我們只想在網頁中顯示原圖片的一部分。這該怎麼辦呢？本篇文章，我們就來探討一下這個問題。例如：下面的圖片，原圖的寬度是910px，高度是1365px。<img title="" alt="" src="https://www.getit01.com/getimg_360.php?url=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樣式，就是背景圖片定位的代碼。樣式中的兩個參數，第一個是控制水平方向的，第二個是控制垂直方向的。添加css樣式以後的代碼如下：<tablestyle="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>如果我們不想讓原圖片中美女左面的那一部分圖片顯示，就把控制水平方向的參數修改為負值。這個負值的大小，可自己修改並觀察其顯示效果而取得。這個負值的絕對值是多少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>看看效果，原圖片中美女左面的那一部分圖片被剪切了吧！如果我們不想讓原圖片中美女右面的那一部分圖片顯示，就把表格標籤中的寬度再減小適當的寬度吧。修改以後的代碼如下：<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>如果我們不想讓原圖片中美女上面的那一部分圖片顯示，就把控制垂直方向的參數修改為負值。這個負值的絕對值是多少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>應用背景圖片的定位，可以製作出漂亮的網頁來。舉例如下：網頁一網頁二網頁三網頁四精美網頁任您選☆代碼學習群教程☆我的原創作品☆我的精品文章☆邊框製作與欣賞☆百荷音畫集錦☆精美邊框任您選☆介紹幾個音畫網站精美頂圖任您選☆教您製作圖書館頂圖☆佳作賞析☆百荷音畫收藏方法☆兩性健康☆美女導航☆聲音播放器☆網頁特效☆中醫瑰寶☆在線製作☆製作一寸照片☆修改照片背景☆捲軸畫製作☆性愛與婚姻☆ps矩形選框工具☆ps套索工具☆ps教程彙集