当前位置：首页 > 前端开发 > 正文

如何通过HTML和CSS给表格（table）添加清晰的水印效果？

admin
前端开发
2025-09-14
7

HTML中给表格添加水印通常需要使用CSS样式来实现，水印可以是文字形式的，也可以是图片形式的,以下是如何使用HTML和CSS给表格添加文字水印的详细步骤：

使用HTML创建表格

你需要创建一个基本的HTML表格。

如何通过HTML和CSS给表格（table）添加清晰的水印效果？第1张

使用CSS添加水印

你需要在CSS中添加水印样式，这里我们将使用@fontface来定义水印字体,然后通过绝对定位将水印添加到表格上。

/* 定义水印样式 */ .watermark { position: absolute; top: 50%; left: 50%; transform: translate(50%, 50%); fontsize: 24px; color: rgba(0, 0, 0, 0.1); /* 透明度设置为10% */ zindex: 1; pointerevents: none; /* 防止水印影响表格交互 */ } /* 为表格添加水印 */ table { position: relative; } /* 添加文字水印 */ table::before { content: 'Confidential'; fontfamily: 'WatermarkFont'; /* 需要事先定义 */ }

定义水印字体

为了使用@fontface，你需要将水印字体文件上传到服务器，并在CSS中定义,以下是一个示例：

@fontface { fontfamily: 'WatermarkFont'; src: url('watermark.ttf') format('truetype'); }

确保替换watermark.ttf为你实际使用的字体文件路径。

如何通过HTML和CSS给表格（table）添加清晰的水印效果？第2张

完整示例

将HTML和CSS结合在一起,以下是完整的示例代码：

如何通过HTML和CSS给表格（table）添加清晰的水印效果？第3张

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8">Table Watermark Example</title> <style> /* 定义水印样式 */ .watermark { position: absolute; top: 50%; left: 50%; transform: translate(50%, 50%); fontsize: 24px; color: rgba(0, 0, 0, 0.1); /* 透明度设置为10% */ zindex: 1; pointerevents: none; /* 防止水印影响表格交互 */ } /* 为表格添加水印 */ table { position: relative; } /* 添加文字水印 */ table::before { content: 'Confidential'; fontfamily: 'WatermarkFont'; /* 需要事先定义 */ } /* 定义水印字体 */ @fontface { fontfamily: 'WatermarkFont'; src: url('watermark.ttf') format('truetype'); } </style> </head> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> </body> </html>