关于在HTML表格中插入背景图片图片重复显示的问题
2015-05-13 19:15
651 查看
先来一段有问题的代码(其实也不能说是有问题,毕竟语法上是没问题的,只是出来的效果不是我们想要的——我们假设预期的效果是背景图片只填充一次而不是多次。)
页面效果是:
我们稍微修改一下<table/>标签的属性就可以让图片只出现一次——
通过style属性来设置背景图片,而不是直接设置background属性,
代码如下:
其中,关键点在于后面的值的设置。除了"no-repeat"这个使图片不重
复的值,还有以下几个值可选:
repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复
inherit: 继承
具体效果请大家自测!
另外,我们大家平时可能经常需要在表格的单元格内添加图片。除了和上面一样添加图片作为背景外,我们更常用的可能是把图片作为一个元素添加,代码如下:
PS:别问我为什么这人的头那么胖,我只想说:以这种方式添加的
图片,宽(width)高(height)值可以任意设置(当然也可以不设置,那
样就是默认大小)。
<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>
页面效果是:
我们稍微修改一下<table/>标签的属性就可以让图片只出现一次——
通过style属性来设置背景图片,而不是直接设置background属性,
代码如下:
<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"这个使图片不重
复的值,还有以下几个值可选:
repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复
inherit: 继承
具体效果请大家自测!
另外,我们大家平时可能经常需要在表格的单元格内添加图片。除了和上面一样添加图片作为背景外,我们更常用的可能是把图片作为一个元素添加,代码如下:
<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 width="200" height="100" src="test.png"/> </td> </tr> </table> </body> </html></span>页面效果是:
PS:别问我为什么这人的头那么胖,我只想说:以这种方式添加的
图片,宽(width)高(height)值可以任意设置(当然也可以不设置,那
样就是默认大小)。
相关文章推荐
- 关于iReport制作报表在程序中导出html时的图片显示问题
- 【JAVA】使用jacob生成的html,关于文字乱码处理,图片无法显示等问题。
- CSS控制表格背景图片不重复显示&Discuz板块背景
- ireport+struts2集成开发总结一: 解决HTML图片背景不能显示的问题
- impose.word利用builder.insertHTML插入图片无法显示的问题
- 在html中,怎么设置背景图片不重复不平铺,只显示一张图片
- 关于MFC播放背景音乐和显示背景图片的问题
- 关于png格式的图片在ie6中显示带背景的问题
- 关于表格Tr背景图片的问题
- 关于在IE-8下 button的背景图片不能正确显示的问题
- 关于在IE-8下 button的背景图片不能正确显示的问题
- 在html中,怎么设置背景图片不重复不平铺,只显示一张图片
- html插入背景图片地址中带有括号的问题
- 关于Android加载HTML页面中的图片显示问题的解决办法
- webpack打包项目教程(还是遇到了打包后背景图片不显示的深坑以及html中的img不显示的问题,爬了一天多才豁然开朗)
- 关于html中使用img标签显示图片问题
- 关于ie8背景图片不显示的问题
- 关于利用webpy的框架下,HTML无法加载CSS和背景图片的问题
- Android 关于重写一个居中的Dialog时,背景图片显示不全的问题。Dialog的style属性介绍
- 关于jar生成exe时出现背景图片无法显示的问题