Html给网页添加自定义水印内容
在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样式来改变其位置和外观。
评论已关闭