JS添加水印（自适应页面）

JavaScript添加网页水印通常涉及到前端处理，可以利用CSS定位和透明度来实现。以下是基本步骤：

1. **HTML结构**：首先，在HTML中创建一个`<div>`元素作为水印容器，设置它的绝对定位，比如放在底部中心。

<div id="watermark" style="position: fixed; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); text-align: center; color: #fff;"></div>

2. **CSS样式**：定义水印的内容、大小、颜色和透明度。使用媒体查询（Media Queries）可以让水印在不同屏幕尺寸下自适应调整。

#watermark {
  font-size: 14px;
  padding: 10px;
  width: fit-content;
}

@media (max-width: 768px) {
  #watermark {
    font-size: 12px;
  }
}

3. **JavaScript动态内容**：如果需要插入动态的文字，可以在JavaScript中获取或设置该元素的内容。例如：

document.getElementById('watermark').innerText = '版权所有 © YourSite.com';

如果你希望水印随页面滚动而移动，可以使用JavaScript的scroll事件监听器：

window.addEventListener('scroll', function() {
  var viewportTop = window.pageYOffset || document.documentElement.scrollTop;
  var watermarkTop = viewportTop + window.innerHeight - 100; // 防止文字超出视窗
  document.getElementById('watermark').style.top = watermarkTop + 'px';
});