关于在HTML表格中插入背景图片图片重复显示的问题
来源:互联网 发布:微信公众平台程序 mac 编辑:程序博客网 时间:2024/05/17 03:50
先来一段有问题的代码(其实也不能说是有问题,毕竟语法上是没问题的,只是出来的效果不是我们想要的——我们假设预期的效果是背景图片只填充一次而不是多次。)
<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)值可以任意设置(当然也可以不设置,那
样就是默认大小)。
0 0
- 关于在HTML表格中插入背景图片图片重复显示的问题
- 在html中,怎么设置背景图片不重复不平铺,只显示一张图片
- HTML:使用绝对路径插入图片后在浏览器中无法显示的问题
- 关于iReport制作报表在程序中导出html时的图片显示问题
- 关于js插入页面元素问题 在js中创建html元素并在 引入js的地方直接显示
- 关于在eclipse中插入图片的问题
- 关于表格Tr背景图片的问题
- 关于在html中背景图片设置的经验
- 解决html代码中插入的图片在浏览器中不显示的办法
- 关于在mysql数据库中插入表格内容的时候出现的编码问题
- html5下表格中插入图片的空隙问题
- 在HTML中显示中文名的图片
- 在HTML中显示中文名的图片
- HTML中图片无法显示的问题
- 怎么在HTML中插入背景图片,绝对有用!
- html中关于图片路径的问题
- 在 HTML 表格中显示 XML 数据
- 在 HTML 表格中显示结果
- Linux C 编程计算流逝的时间--毫秒
- POJ 1321 棋盘问题 简单的DFS
- 最长递增子序列 O(NlogN)算法
- 马尔科夫随机场(MRF)与条件随机场(CRF)
- 二分题目总结
- 关于在HTML表格中插入背景图片图片重复显示的问题
- C语言学习书籍
- VS2008中自定义C++工程模板与修改新建文件默认编码的办法
- oracle中to_date详细用法示例(oracle日期格式转换)
- CarPlay/DIO: CommunicationPlugin中Audio的处理流程
- 注解式绑定控件
- 如何选择开源许可证?
- OSG学习笔记(一)
- c++如何为数组成员在初始化列表里初始化