[CSS] 用html拼复杂页面时背景图片与img错位问题

wangchao1982 2009-03-23 11:44:20

问题：[CSS] 用html拼复杂页面时背景图片与img错位问题，一个是图片和背景色之间的间隙，另外就是两者的错位问题。
问题现象

问题的简化代码重现：



<html>

<style>

html

{

border:0px;

margin:0px;

padding:0px;

}

</style>

<!--因为图片的边缘是黑色的，所以用白色的背景色能把问题看的更清楚-->

<body style="background:white;">

<br/><br/><br/><br/><br/>

<table  style=" width:100%;">

<tr>

<td>

<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg" alt="left;  "/>

</td>

<td style="width:100%; background:url(http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg); background-repeat:repeat-x;"> 

</td>

<td>

<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg" alt="right;  "/>

</td>

</tr>

</table>



</body>

</html>

...全文

964 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

愿圣光诅咒你 2009-04-19

打赏
举报

额.没去测试



<html>

<style>

html

{

border:0px;

margin:0px;

padding:0px;

}

td {

	margin: 0px;

	padding: 0px;

	vertical-align: middle;

	}

</style>

<!--因为图片的边缘是黑色的，所以用白色的背景色能把问题看的更清楚-->

<body style="background:white;">

<br/><br/><br/><br/><br/>

<table  style=" width:100%;">

<tr>

<td>

<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg" alt="left;  "/>

</td>

<td style="width:100%; background:url(http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg); background-repeat:repeat-x;"> 

</td>

<td>

<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg" alt="right;  "/>

</td>

</tr>

</table>



</body>

</html>

你试一下

愿圣光诅咒你 2009-04-19

打赏
举报

设置img的vertical-align: middle;

gdjlc 2009-04-19

打赏
举报

第1个问题是：中间图片比左右边的两张图片高出1px吗，是的话，把

html
{
border:0px;
margin:0px;
padding:0px;
}
改为
*,html
{
border:0px;
margin:0px;
padding:0px;
}
就可以了。

第2个问题是：表格中三张图片之间有间隙是不是？
<table style=" width:100%;">
改为
<table style=" width:100%;" cellpadding="0" cellspacing="0" >

-----------------------------------------------------

以上代码测试通过，完整代码：



<html>

<style>

*,html

{

border:0px;

margin:0px;

padding:0px;

}

</style>

<!--因为图片的边缘是黑色的，所以用白色的背景色能把问题看的更清楚-->

<body style="background:white;">

<br/><br/><br/><br/><br/>

<table  style=" width:100%;" cellpadding="0" cellspacing="0" >

<tr>

<td>

<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg" alt="left;  "/>

</td>

<td style="width:100%; background:url(http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg); background-repeat:repeat-x;"> 

</td>

<td>

<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/wangchao1982/EntryImages/20090323/Snap3.jpg" alt="right;  "/>

</td>

</tr>

</table>



</body>

</html>