js给html添加一个居中水印
时间: 2023-06-05 19:47:37 浏览: 79
要给一个html页面添加居中水印,可以使用JavaScript来实现。
首先,需要在HTML页面中添加一个带有样式的div元素作为水印,例如:
```
<div id="watermark" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); font-size:30px; color:#999; opacity:0.5;">Watermark</div>
```
这个div元素的id为“watermark”,设置了固定定位和居中样式,字体大小、颜色和不透明度也可以根据需要进行调整。
然后在JavaScript代码中使用document对象的createElement()方法创建这个div元素,并将它添加到文档中。代码如下:
```
var watermark = document.createElement("div"); // 创建div元素
watermark.id = "watermark"; // 设置id属性
watermark.style.position = "fixed"; // 设置定位方式
watermark.style.top = "50%"; // 设置上边距为50%
watermark.style.left = "50%"; // 设置左边距为50%
watermark.style.transform = "translate(-50%, -50%)"; // 使用translate实现居中
watermark.style.fontSize = "30px"; // 设置字体大小
watermark.style.color = "#999"; // 设置文字颜色
watermark.style.opacity = "0.5"; // 设置不透明度
watermark.innerText = "Watermark"; // 设置显示内容
document.body.appendChild(watermark); // 将div元素添加到body中
```
通过这样的方法,就可以给html页面添加一个居中水印了。需要注意的是,这个水印固定在页面中,无论滚动条如何滚动都会保持在屏幕中心位置。