*背景图片定位应用
*背景图片定位应用
在制作网页时，我们经常要用到背景图片。但是，有的图片过宽过大，我们只想在网页中显示原图片的一部分。这该怎么办呢？
本篇文章，我们就来探讨一下这个问题。
例如：下面的图片，原图的宽度是910px，高度是1365px。
我们先把图片的“地址”黏贴到“表格标签”中“背景图片地址”的位置中。
代码如下：
|
<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样式以后的代码如下：
|
<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> |
如果我们不想让原图片中美女左面的那一部分图片显示，就把控制水平方向的参数修改为负值。这个负值的大小，可自己修改并观察其显示效果而取得。这个负值的绝对值是多少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> |
应用背景图片的定位，可以制作出漂亮的网页来。举例如下：
 |
“春天没来”编撰
2015年4月14日于北京 |
