html根据页面长度添加多行多条文字水印
时间: 2023-08-09 16:10:00 浏览: 61
要实现在HTML页面上添加多行多条文字水印,可以通过以下步骤:
1. 创建一个容器元素,例如div,并将其位置设置为绝对定位。
2. 在该容器中添加多个文本元素,每个文本元素表示一行文字水印。可以使用CSS设置每个文本元素的样式,例如字体大小、颜色、透明度等。
3. 使用JavaScript计算页面的高度和宽度,并根据需要添加足够的文本元素。可以使用window.innerHeight和window.innerWidth属性获取浏览器窗口的高度和宽度。
4. 使用CSS设置文本元素的位置。可以使用top和left属性将文本元素定位在容器内的适当位置。
以下是一个示例代码,用于在HTML页面上添加多行多条文字水印:
```html
<style>
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.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>
<div class="watermark">
<span class="watermark-text">Watermark Line 1</span>
<span class="watermark-text">Watermark Line 2</span>
<span class="watermark-text">Watermark Line 3</span>
<span class="watermark-text">Watermark Line 4</span>
<span class="watermark-text">Watermark Line 5</span>
</div>
<script>
function addWatermark() {
var watermark = document.querySelector('.watermark');
var height = window.innerHeight;
var width = window.innerWidth;
var lineHeight = 50; // 每行文本高度
var lineCount = Math.ceil(height / lineHeight); // 文本行数
var textCount = Math.ceil(width / 200); // 每行文本数量
for (var i = 0; i < lineCount * textCount; i++) {
var span = document.createElement('span');
span.classList.add('watermark-text');
span.innerText = 'Watermark Text';
var top = Math.floor(i / textCount) * lineHeight;
var left = (i % textCount) * 200;
span.style.top = top + 'px';
span.style.left = left + 'px';
watermark.appendChild(span);
}
}
addWatermark();
</script>
```
在上述示例代码中,使用了一个名为watermark的div元素作为容器,其中包含了多个名为watermark-text的span元素,每个元素表示一行文字水印。在JavaScript代码中,使用了window.innerHeight和window.innerWidth属性获取浏览器窗口的高度和宽度,并根据需要添加足够的文本元素。最后,使用CSS设置文本元素的位置,将它们定位在容器内的适当位置。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.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)