背景图片定位移动，效果很美的网页！本节教程我给大家分析讲解一下这种网页的制作方法。
先设置一个表格，然后在表格中放入几个宽度、高度、移动方向、移动速度等内容相同的移动标签。每一个移动标签控制一个表格，表格中设置定位的背景图片。
我们先来看看我举例的网页代码与其显示效果：
<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日于北京
效果图：背景图片定位移动
