首页使用js在网页中动态添加水印

使用js在网页中动态添加水印

时间: 2023-11-17 18:04:54 浏览: 34

要在网页中动态添加水印，可以使用CSS样式和JavaScript动态创建DOM元素来实现。以下是一个简单的在网页中动态添加水印的例子： ```html <!DOCTYPE html> <html> <head> <title>动态添加水印</title> <meta charset="utf-8"> <style> .watermark { position: fixed; top: 0; left: 0; width: 100%; height: 100%; 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; white-space: nowrap; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; } </style> </head> <body> <div id="watermark" class="watermark"></div> <script> var watermark = document.getElementById('watermark'); var watermarkText = document.createElement('div'); watermarkText.classList.add('watermark-text'); watermarkText.innerText = 'watermark'; watermark.appendChild(watermarkText); </script> </body> </html> ``` 在上面的代码中，我们首先使用CSS样式设置了水印的样式和位置。然后使用JavaScript动态创建了一个DIV元素，并添加了水印文字。最后将水印DIV元素添加到网页上，就可以在网页中看到动态添加的水印了。需要注意的是，动态添加的水印在页面刷新后会被清除，如果需要在多个页面中都添加水印，可以考虑将水印代码封装成一个JavaScript函数，然后在每个页面中调用。