html添加文字水印 水印大小适合A4纸
时间: 2023-08-19 19:31:34 浏览: 78
要在HTML中添加一个适合A4纸大小的文字水印,可以使用以下步骤:
1. 创建一个容器元素,并将其大小设置为A4纸大小,即210mm x 297mm。可以使用CSS设置容器元素的宽度和高度,如下所示:
```css
.watermark-container {
width: 210mm;
height: 297mm;
}
```
2. 在容器元素中添加一个文本元素,表示水印文本。可以使用CSS设置文本元素的样式,如字体大小、颜色、透明度等,如下所示:
```css
.watermark-text {
font-size: 20px;
color: rgba(0, 0, 0, 0.2);
opacity: 0.5;
transform: rotate(-45deg);
transform-origin: 0 0;
}
```
3. 使用JavaScript计算水印文本的位置,并将其添加到容器元素中。可以使用CSS设置文本元素的位置,如下所示:
```js
function addWatermark() {
var container = document.querySelector('.watermark-container');
var text = document.createElement('div');
text.classList.add('watermark-text');
text.innerText = 'Watermark Text';
container.appendChild(text);
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var textWidth = text.offsetWidth;
var textHeight = text.offsetHeight;
var left = (containerWidth - textWidth) / 2;
var top = (containerHeight - textHeight) / 2;
text.style.left = left + 'px';
text.style.top = top + 'px';
}
```
在上述代码中,使用了一个名为watermark-container的div元素作为容器,其中包含了一个名为watermark-text的div元素,表示水印文本。在JavaScript代码中,使用了offsetWidth和offsetHeight属性获取容器元素和文本元素的宽度和高度,并计算文本元素的位置。最后,使用CSS设置文本元素的位置,将它定位在容器元素中央。
完整的HTML代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Watermark</title>
<style>
.watermark-container {
width: 210mm;
height: 297mm;
margin: 0 auto;
position: relative;
}
.watermark-text {
font-size: 20px;
color: rgba(0, 0, 0, 0.2);
opacity: 0.5;
transform: rotate(-45deg);
transform-origin: 0 0;
position: absolute;
}
</style>
</head>
<body onload="addWatermark()">
<div class="watermark-container"></div>
<script>
function addWatermark() {
var container = document.querySelector('.watermark-container');
var text = document.createElement('div');
text.classList.add('watermark-text');
text.innerText = 'Watermark Text';
container.appendChild(text);
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var textWidth = text.offsetWidth;
var textHeight = text.offsetHeight;
var left = (containerWidth - textWidth) / 2;
var top = (containerHeight - textHeight) / 2;
text.style.left = left + 'px';
text.style.top = top + 'px';
}
</script>
</body>
</html>
```
在上述代码中,使用了margin: 0 auto;将容器元素居中显示,并使用position: relative;将文本元素的位置相对于容器元素定位。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)