Html给网页添加自定义水印内容
warning:
这篇文章距离上次修改已过445天，其中的内容可能已经有所变动。
在HTML页面中添加自定义水印内容，可以通过在body中添加一个绝对定位的div，并在其中设置水印文本。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Watermark</title>
<style>
body {
position: relative;
}
.watermark {
position: fixed;
top: 30%;
left: 10%;
z-index: 1000;
font-size: 5em;
color: rgba(0, 0, 0, 0.1);
transform: rotate(-45deg);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
</style>
</head>
<body>
<div class="watermark">Watermark Text</div>
<!-- 页面的其他内容 -->
</body>
</html>在这个示例中，.watermark 类定义了水印的样式，包括定位、大小、颜色、透明度、旋转等。pointer-events: none; 确保了水印不会阻挡页面上的其他交互（如点击链接），而 user-select: none; 防止了水印文本被用户选中。这个水印是固定在页面上的，但可以通过调整CSS样式来改变其位置和外观。
评论已关闭