背景圖片定位移動（代碼教程）

背景圖片定位移動（教程）背景圖片定位移動，效果很美的網頁！本節教程我給大家分析講解一下這種網頁的製作方法。先設置一個表格，然後在表格中放入幾個寬度、高度、移動方向、移動速度等內容相同的移動標籤。每一個移動標籤控制一個表格，表格中設置定位的背景圖片。我們先來看看我舉例的網頁代碼與其顯示效果：<table style="BORDER-BOTTOM: #00dd00 15px dotted; POSITION: relative; BORDER-LEFT: #00dd00 15px dotted; BORDER-TOP: #00dd00 15px dotted; TOP: 0px; BORDER-RIGHT: #00dd00 15px dotted; LEFT: 0px" title="背景圖片定位移動——春天沒來製作" cellspacing="0" cellpadding="0" width_="790" bgcolor="#ff66ff" height="930"><tbody><tr><td><marquee style="border: 5px solid rgb(230, 230, 0); position: absolute; top: 5px; left: 0px; height: 130px; width: 750px;" title="移動屏幕1" direction="up" scrollamount="1" scrolldelay="50" cellspacing="0" cellpadding="0"><table style="BACKGROUND-POSITION: 0px -5px" border="0" width_="750" background="http://image22.360doc.com/DownloadImg/2011/01/1615/8520660_2.jpg" title="表格1" height="1055"><tbody><tr><td></td></tr></tbody></table></marquee></td></tr><tr><td><marquee style="border: 5px solid rgb(230, 230, 0); position: absolute; top: 155px; left: 0px; height: 130px; width: 750px;" title="移動屏幕2" direction="up" scrollamount="1" scrolldelay="50" cellspacing="0" cellpadding="0"><table style="BACKGROUND-POSITION: 0px -155px" border="0" width_="750" background="http://image22.360doc.com/DownloadImg/2011/01/1615/8520660_2.jpg" title="表格2" height="1055"><tbody><tr><td></td></tr></tbody></table></marquee></td></tr><tr><td><marquee style="border: 5px solid rgb(230, 230, 0); position: absolute; top: 305px; left: 0px; height: 130px; width: 750px;" title="移動屏幕3" direction="up" scrollamount="1" scrolldelay="50" cellspacing="0" cellpadding="0"><table style="BACKGROUND-POSITION: 0px -305px" border="0" width_="750" background="http://image22.360doc.com/DownloadImg/2011/01/1615/8520660_2.jpg" title="表格3" height="1055"><tbody><tr><td></td></tr></tbody></table></marquee></td></tr><tr><td><marquee style="border: 5px solid rgb(230, 230, 0); position: absolute; top: 455px; left: 0px; height: 130px; width: 750px;" title="移動屏幕4" direction="up" scrollamount="1" scrolldelay="50" cellspacing="0" cellpadding="0"><table style="BACKGROUND-POSITION: 0px -455px" border="0" width_="750" background="http://image22.360doc.com/DownloadImg/2011/01/1615/8520660_2.jpg" title="表格4" height="1055"><tbody><tr><td></td></tr></tbody></table></marquee></td></tr><tr><td><marquee style="border: 5px solid rgb(230, 230, 0); position: absolute; top: 605px; left: 0px; height: 130px; width: 750px;" title="移動屏幕5" direction="up" scrollamount="1" scrolldelay="50" cellspacing="0" cellpadding="0"><table style="BACKGROUND-POSITION: 0px -605px" border="0" width_="750" background="http://image22.360doc.com/DownloadImg/2011/01/1615/8520660_2.jpg" title="表格5" height="1055"><tbody><tr><td></td></tr></tbody></table></marquee></td></tr><tr><td><marquee style="border: 5px solid rgb(230, 230, 0); position: absolute; top: 755px; left: 0px; height: 130px; width: 750px;" title="移動屏幕6" direction="up" scrollamount="1" scrolldelay="50" cellspacing="0" cellpadding="0"><table style="BACKGROUND-POSITION: 0px -755px" border="0" width_="750" background="http://image22.360doc.com/DownloadImg/2011/01/1615/8520660_2.jpg" title="表格6" height="1055"><tbody><tr><td></td></tr></tbody></table></marquee></td></tr></tbody></table>在總表格中，我設置了一些屬性：css樣式：四條邊框線的顏色、寬度、樣式、相對定位的居上值與居左值。表格的標題、表格的間距與邊距、表格的寬度與高度、表格的背景顏色。總表格中放入了六個移動標籤。為了說明時方便起見，我們不妨把這六個移動標籤依照自上而下的順序分別稱為：移動屏幕1，移動屏幕2，移動屏幕3，移動屏幕4，移動屏幕5，移動屏幕6。每一個移動屏幕控制著一個分表格。同樣為了說明時方便起見，我們不妨把這六個表格也依照自上而下的順序分別稱為：表格1，表格2，表格3，表格4，表格5，表格6。每一個移動標籤中都設置了移動屏幕的邊框線寬度、樣式與顏色，背景圖片定位的居左值與居上值，移動屏幕的寬度與高度，移動屏幕的標題，移動方向，移動速度，兩次移動之間的間隔時間，移動屏幕的間距與邊距。移動屏幕控制的分表格中，都設置了絕對定位的居左值與居上值，表格的寬度與高度，邊框線寬度，表格的標題與背景圖片。當然了，以上這些設置，你都可以增減歐！下面我重點講解幾個問題：一、各個移動屏幕中，絕對定位的居上值與居左值如何設置？說到定位，就得懂得定位的參考點。無論絕對定位，還是背景圖片的定位，都有個定位參考點。定位參考點，就是指你要應用的圖片或者其它內容的左上角要與網頁中的哪一點相重合。本文中，我在總表格中已經設置了css的相對定位樣式，那麼，絕對定位的參考點就是表格的左上角。如果總表格中不設置css的相對定位樣式，那麼，絕對定位的參考點就是網頁的左上角。那麼，6個移動屏幕我是怎樣設置的呢？為什麼要那樣設置？6個移動屏幕的居左值，我都設置為0px。居上值，從上往下分別設置為：5px，155px，305px，455px，605px，755px。這就是說，移動屏幕1的左上角，在總表格中居上5px的地方與總表格左邊框線內邊線居上5px的那一點重合。移動屏幕的高度為130px，寬度為750px。移動屏幕2的左上角，在總表格中居上155px的地方與總表格左邊框線內邊線居上155px的那一點重合。移動屏幕的高度為130px，寬度為750px。移動屏幕3的左上角，在總表格中居上305px的地方與總表格左邊框線內邊線居上305px的那一點重合。移動屏幕的高度為130px，寬度為750px。……從設置中大家可以看出，每兩個移動屏幕之間的居上值的差為150px。為什麼要這樣設置呢？每個移動屏幕的高度為130px,每兩個移動屏幕之間有上一個移動屏幕的下邊框線5px，下一個移動屏幕的上邊框線5px。每兩個移動屏幕之間的居上值的差設置為150px，這就保證了每兩個移動屏幕之間有10px的空白距離。如果兩個移動屏幕連在一起了，就不美觀了。二、各個分表格中，背景圖片如何定位呢？背景圖片的定位，要與移動屏幕相配合。移動屏幕中的居上值設置為多少px，它所控制的表格中背景圖片的居上值就設置為負的多少px，只有這樣才能夠保證各個移動屏幕中背景圖片正常銜接，源源不斷地向上滾動。6個移動標籤所控制的6個表格中的背景圖片的定位，居左值都為：0px，居上值，從上往下依次為：-5px，-155px，-305px，-455px，-605px，-755px。三、背景圖片規格與背景圖片定位的關係：大家要清楚，移動標籤控制的表格的高度與寬度，也就是定位的背景圖片的高度與寬度。所以，如果想讓背景圖片完整地顯示，完整地滾動，這裡的高度與寬度就應該與背景圖片的規格一致。*如果你想裁剪背景圖片，也是可以的。背景圖片定位居上值取正值，減小高度，會裁剪掉背景圖片的下部；背景圖片定位居上值取正值，減小寬度，會裁剪掉背景圖片的右部；背景圖片定位居上值取負值，並減小相同的高度值，會裁剪掉背景圖片的上部；背景圖片定位居左值取負值，並減小相同的寬度值，會裁剪掉背景圖片的左部。四、幾個寬度值的設置：各個移動屏幕的寬度，各個分表格的寬度，都與背景圖片的寬度相一致，都設置為：750px。總表格的寬度怎樣設置呢？因為移動屏幕有5px的邊框線，左右兩邊就是10px;總表格有15px的邊框線，左右兩邊就是30px;因此，總表格的寬度應該設置為790px>五、幾個高度值的設置：幾個移動屏幕的高度都設置為130px,幾個分表格的高度都要與背景圖片的高度相同，設置為1055px，這樣，完整的背景圖片才能夠在各個移動屏幕中源源不斷地向上滾動。總表格的高度值怎樣設置？要計算一下歐！每個移動屏幕的高度為130px,加上上下兩邊5px的邊框線就是140px。每兩個移動屏幕之間有10px的間隔，6個移動屏幕之間有5個10px的間隔。總表格的邊框線為15px，上下兩邊一共30px。第一個移動屏幕居上5px，為了對稱，為了美觀，在第6個移動屏幕下方應該空出5px的高度。好了，總表格的高度我們計算出來了！總表格的寬度＝140×6＋10×5＋15×2＋5×2＝930（px）朋友們，你弄懂了沒有？可謂牽一髮而動全身歐！如果你想製作這種網頁，可不是只換個背景圖片的事兒。好了！你也試試吧！比照我撰寫的這篇教程，反覆多試幾次，我相信你一定會成功的！「春天沒來」編撰2017年12月31日於北京

效果圖：背景圖片定位移動

代碼學習群教程

我的ps教程
推薦閱讀：