如何给一个页面添加文字水印
时间: 2024-01-12 20:03:53 浏览: 62
要在一个页面上添加文字水印,你可以使用CSS和JavaScript来实现。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.watermark::after {
content: 'Watermark';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="watermark"></div>
<!-- 页面内容 -->
<script>
// 可选:使用JavaScript动态修改水印内容
document.addEventListener('DOMContentLoaded', function() {
var watermark = document.querySelector('.watermark::after');
watermark.textContent = 'New Watermark';
});
</script>
</body>
</html>
```
在上面的代码中,我们创建了一个`.watermark`的CSS类,它将作为水印的容器,并设置其样式,如定位、大小、层级等。我们使用`::after`伪元素来添加水印的文本内容,并设置其样式,如字体大小、颜色等。
将需要添加水印的页面内容放在`.watermark`元素之后,这样水印就会覆盖在页面内容上方。通过设置`z-index: -1;`和`pointer-events: none;`属性,水印不会干扰用户的交互。
如果需要使用JavaScript动态修改水印内容,可以在页面加载完成后,通过`querySelector`方法获取`.watermark::after`元素,然后修改其`textContent`属性。
请根据你的需求修改代码中的水印内容、样式和位置等参数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)