js 在页面上加水印
时间: 2023-11-27 11:51:28 浏览: 28
可以通过以下步骤在页面上加水印:
1. 创建一个 div 元素,并设置其样式为绝对定位,以便将其放置在页面上的任何位置。
2. 将 div 元素的 z-index 属性设置为一个高于其他元素的值,以确保水印显示在其他元素的上方。
3. 在 div 元素中插入文本或图片作为水印。
4. 使用 JavaScript 将 div 元素添加到页面中。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Watermark Example</title>
<style>
.watermark {
position: absolute;
top: 50px;
left: 50px;
z-index: 9999;
opacity: 0.5;
font-size: 24px;
font-weight: bold;
transform: rotate(-30deg);
}
</style>
</head>
<body>
<div class="watermark">Watermark Text</div>
<script>
var watermark = document.createElement('div');
watermark.className = 'watermark';
watermark.textContent = 'Watermark Text';
document.body.appendChild(watermark);
</script>
</body>
</html>
```
在上面的示例中,我们创建了一个名为 "watermark" 的 div 元素,并将其样式设置为绝对定位。然后,我们使用 JavaScript 将其添加到页面中。在这个例子中,水印文本是 "Watermark Text",并且被设置为旋转了 -30 度。