先来一段有问题的代码（其实也不能说是有问题，毕竟语法上是没问题的，只是出来的效果不是我们想要的??我们假设预期的效果是背景图片只填充一次而不是多次。）
<span style="font-size:18px;"><html><head> <title>设定表格的背景图像</title></head><body> <table border=3 width=400 height=100 bordercolor=#336699 background="test.png"> <tr> <td>姓名</td> <td>张三</td> </tr> <tr> <td>性别</td> <td>男</td> </tr> <tr> <td>年龄</td> <td>20</td> </tr> </table></body></html></span>
页面效果是：
我们稍微修改一下
立即学习“前端免费学习笔记（深入）”；
<span style="font-size:18px;"><html><head> <title>设定表格的背景图像</title></head><body> <table border=3 width=400 height=100 bordercolor=#336699 style="background-image:url(test.png); background-repeat:no-repeat"> <tr> <td>姓名</td> <td>张三</td> </tr> <tr> <td>性别</td> <td>男</td> </tr> <tr> <td>年龄</td> <td>20</td> </tr> </table></body></html></span>
其中，关键点在于后面的值的设置。除了"no-repeat"这个使图片不重复的值，还有一下几个值可选：
具体效果请大家自测！
另外，我们大家平时可能经常需要在表格的单元格内添加图片。除了和上面一样添加图片作为背景外，我们更常用的可能是把图片作为一个元素添加，代码如下：
<span style="font-size:18px;"><html><head> <title>设定表格的背景图像</title></head><body> <table border=3 width=400 height=100 bordercolor=#336699 > <tr> <td>姓名</td> <td>张三</td> </tr> <tr> <td>性别</td> <td>男</td> </tr> <tr> <td>年龄</td> <td>20</td> </tr> <tr> <td>头像</td> <td> <img style="max-width:90%" style="max-width:90%" src="test.png"/ alt="关于在HTML表格中插入背景图片图片重复显示的问题_html/css_WEB-ITnose" > </td> </tr> </table></body></html></span>
PS：别问我为什么这人的头那么胖，我只想说：以这种方式添加的图片，宽(width)高(height)值可以任意设置（当然也可以不设置，那样就是默认大小）。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
373
收藏
