如何将图像设置为表的背景

使用CSS后台属性将图像背景添加到表

区分背景表有助于强调表格相对于网页上的其他一切的内容。要添加表背景,您需要更改级联样式表支持您的网页。

现代办公楼,形成绿色的半岛再生,东南伦敦,英国的一部分
建筑摄影/ Avalon / Getty Images

入门

将背景图像添加到表的最佳方法是使用CSS背景财产。准备自己有效地编写CSS并避免意外显示故障,打开背景图像并记下高度和宽度。然后将图像上传到托管提供商。测试URL.对于图像;图像不显示的最常见原因之一是因为URL中存在拼写错误。

在文档的头部插入CSS样式块:


在您的表格上写下您的CSS,并将其放入样式块内:

将您的表格放在HTML中:


      

细胞1
细胞2.


细胞1
细胞2.

设置表的宽度和高度以匹配图像宽度和高度。

如果您的表内容大于图像高度和宽度,则背景图像仅显示一次。

在一张桌子上放一个背景

上述说明将在页面上的每个表上设置相同的背景图像。要将背景放在仅特定的表上,请使用a班级属性。添加班级背景到任何您想要拥有那张背景图像的表。设置这些表的宽度和高度。

让表背景图像重复

较大的表格或具有更多内容的表可能需要具有背景重复,以便填充整个表。更改CSS中的值,使图像在y轴上重复x轴,或在两者上铺张。

背景:URL(“映像URL”)重复;

默认情况下,重复值将被平铺,但您也可以将重复值设置为

重复-X.

或者

重复 -  Y.

分别水平或垂直铺面。

细胞背景颜色块表背景图像

任何背景颜色在桌面上设置覆盖表上的背景图像。所以在用表格背景图像结合使用背景颜色时要小心。

考虑

您使用的任何图像必须正确许可;仅仅因为您可以在Web上找到一张照片并不意味着您可以适合您自己的使用。尊重版权!

表背景从底层页面设置表。但是,在使用这种技术之前,请在两次考虑。插入中性图像可能不会分散注意力,但是复杂的图片旨在可爱(例如,插入表格后面的小猫的图片,表示宠物采用的表格)可能会出现不专业的并且会影响可读性表格数据

此页面是否有帮助?