html表格滚动显示图片,关于在HTML表格中插入背景图片图片重复显示的问题

本文介绍了如何通过CSS属性解决表格背景图片重复显示的问题。关键在于使用`background-repeat`属性设置为`no-repeat`,确保图片只填充一次。此外,还提到了在单元格中插入图片的方法,并指出图片尺寸可以自由调整。读者还可以了解到其他背景图片的平铺选项,如`repeat`、`repeat-x`和`repeat-y`。
摘要由CSDN通过智能技术生成

先来一段有问题的代码(其实也不能说是有问题,毕竟语法上是没问题的,只是出来的效果不是我们想要的——我们假设预期的效果是背景图片只填充一次而不是多次。)

设定表格的背景图像
姓名张三
性别
年龄20

页面效果是:

80d9b5f32544997e9c40f5d369719f42.png

我们稍微修改一下

标签的属性就可以让图片只出现一次——

通过style属性来设置背景图片,而不是直接设置background属性,

代码如下:

设定表格的背景图像
姓名张三
性别
年龄20

页面效果是:

96f5181c93a5db4da69f19e5b1d10eec.png

其中,关键点在于后面的值的设置。除了"no-repeat"这个使图片不重

复的值,还有以下几个值可选:

9816a9022ac7caa4f35f38e50546e31c.png

repeat: 平铺整个页面,左右与上下

repeat-x: 在x轴上平铺,左右

repeat-y: 在y轴上平铺,上下

no-repeat: 图片不重复

inherit: 继承

具体效果请大家自测!

另外,我们大家平时可能经常需要在表格的单元格内添加图片。除了和上面一样添加图片作为背景外,我们更常用的可能是把图片作为一个元素添加,代码如下:

设定表格的背景图像
姓名张三
性别
年龄20
头像

test.png

页面效果是:

f12422be2560ee05bf6abd2c8ecb4aaf.png

PS:别问我为什么这人的头那么胖,我只想说:以这种方式添加的

图片,宽(width)高(height)值可以任意设置(当然也可以不设置,那

样就是默认大小)。

原文:http://blog.csdn.net/yushanglinvip/article/details/45696361

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值