HTML学习使用js给html页面全屏水印
在HTML页面中使用JavaScript添加全屏水印可以通过以下步骤实现：
- 创建一个全屏的div元素，并设置其样式以覆盖整个页面。
- 在这个div中添加水印文字，可以通过CSS样式设置文字透明度和位置使其看起来像水印。
- 将这个div添加到页面的body中。
以下是实现全屏水印的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏水印示例</title>
<style>
.watermark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-color: rgba(0, 0, 0, 0.2);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 50px;
}
</style>
</head>
<body>
<div id="watermark-container"></div>
<script>
// 创建水印div
var watermarkDiv = document.createElement('div');
watermarkDiv.className = 'watermark';
watermarkDiv.innerText = '水印文字';
// 将水印div添加到页面中
var body = document.body;
body.appendChild(watermarkDiv);
</script>
</body>
</html>在这个例子中，.watermark 类定义了全屏水印的样式，包括透明度、位置、大小和文字信息。JavaScript 创建了一个div元素并设置其类名和文字内容，然后将其添加到body中。这样就实现了全屏水印的效果。
评论已关闭