*背景圖片定位應用

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

*背景圖片定位應用

在製作網頁時,我們經常要用到背景圖片。但是,有的圖片過寬過大,我們只想在網頁中顯示原圖片的一部分。這該怎麼辦呢?

本篇文章,我們就來探討一下這個問題。

例如:下面的圖片,原圖的寬度是910px,高度是1365px。

<img title=”” alt=”” src=”http://image79.360doc.com/DownloadImg/2014/11/1814/47221139_7.jpg”>

我們先把圖片的「地址」黏貼到「表格標籤」中「背景圖片地址」的位置中。

代碼如下:

<table 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” 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” 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” 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” 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教程匯集

*背景圖片定位應用
  更多精彩*背景圖片定位應用
  更多期待

*背景圖片定位應用

「春天沒來」編撰

2015年4月14日於北京