将图像设置为网页上表格的背景

在 Windows 10 中更改显示设置、背景图像、图标和屏幕保护程序 (六月 2025)

在 Windows 10 中更改显示设置、背景图像、图标和屏幕保护程序 (六月 2025)
Anonim

将表格与背景区分开来有助于强调表格相对于网页上其他内容的内容。要添加表格背景，您需要调整支持您网页的级联样式表（CSS）。

入门

向表中添加背景图像的最佳方法是使用CSS

背景

属性。要准备好有效地编写CSS并避免意外的显示故障，请打开背景图像并记下高度和宽度。然后将您的图像上传到您的托管服务商。测试图像的URL;图像不显示的最常见原因之一是因为URL中存在拼写错误。完成该步骤后，将CSS样式块放在文档的头部：

  1. 在桌面上为背景编写CSS并将其放在样式块中：

    table {background：url（“ 图像的URL “）不重复;}

    1. 将表放在HTML中：

    2. 细胞1

    3. 细胞2

    6. 细胞1

    7. 细胞2

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

    … ​​

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

将背景放在一张桌子上

以上说明将在页面上的每个表上设置相同的背景图像。如果您只想将背景放在特定的表上，则需要使用a

类

  1. attribute.Change你的CSS读取：

    table.background {background：url（“ 图像的URL “）不重复;}

  2. 添加课程 背景 到任何你想拥有该背景图像的表格。设置这些表的宽度和高度。

    类=“背景” style =“width：400px; height：500px;> …

让表背景图像重复

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

background：url（“URL to image”）重复;

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

重复-X

要么

重复-Y

分别水平或垂直平铺。

细胞背景颜色阻拦表背景图象

表格单元格上设置的任何背景颜色都将覆盖表格中的背景图像。因此，在将细胞上的背景颜色与表格背景图像结合使用时要小心。

注意事项

表格背景将您的表格与基础页面区分开来。但是，在使用此技术之前请三思。插入中性图像可能不会分散注意力，但是想要可爱的复杂图片（例如，在桌子后面插入表示宠物收养的小猫图片）可能看起来不专业并且可能影响表格数据的可读性。

您使用的任何图像都必须获得适当许可;仅仅因为你可以在网上找到一张照片并不意味着你可以将它用于你自己的用途。尊重版权！

编辑推荐