HTML如何给全站页面加水印_HTML给全站页面加水印的实现教程

body {
  position: relative; /* 确保水印的定位是相对于body */
}

body::after {
  content: '';
  background-image: url('your-watermark.png'); /* 替换为你的水印图片路径 */
  background-repeat: repeat; /* 水印重复平铺 */
  background-position: center; /* 水印位置居中 */
  opacity: 0.1; /* 水印透明度 */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed; /* 水印固定在页面上 */
  z-index: -1;   /* 确保水印在页面内容下方 */
  pointer-events: none; /* 避免水印遮挡页面元素 */
}

*   **注意事项：**
    *   `opacity`属性控制水印的透明度，可以根据需要调整。
    *   `background-repeat`属性控制水印的重复方式，可以设置为`repeat`、`no-repeat`、`repeat-x`、`repeat-y`。
    *   `z-index`属性需要设置为负值，以确保水印在页面内容下方。
    *   `pointer-events: none;`  防止水印影响页面元素的点击事件。

function addWatermark(text) {
  const watermarkDiv = document.createElement('div');
  watermarkDiv.style.position = 'fixed';
  watermarkDiv.style.top = '0';
  watermarkDiv.style.left = '0';
  watermarkDiv.style.width = '100%';
  watermarkDiv.style.height = '100%';
  watermarkDiv.style.textAlign = 'center';
  watermarkDiv.style.fontSize = '20px';
  watermarkDiv.style.color = 'rgba(0, 0, 0, 0.1)';
  watermarkDiv.style.zIndex = '-1';
  watermarkDiv.style.pointerEvents = 'none';
  watermarkDiv.innerText = text; //水印文字
  document.body.appendChild(watermarkDiv);
}

// 在页面加载完成后添加水印
window.onload = function() {
  addWatermark('Your Watermark Text'); // 替换为你的水印文字
};

*   **动态生成多个水印：**  可以通过循环创建多个水印元素，并将其放置在页面的不同位置，以增加水印的强度。

function addMultipleWatermarks(text, rows = 5, cols = 5) {
    const container = document.body;
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;
    const watermarkWidth = containerWidth / cols;
    const watermarkHeight = containerHeight / rows;

    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            const watermarkDiv = document.createElement('div');
            watermarkDiv.style.position = 'absolute';
            watermarkDiv.style.top = `${i * watermarkHeight}px`;
            watermarkDiv.style.left = `${j * watermarkWidth}px`;
            watermarkDiv.style.width = `${watermarkWidth}px`;
            watermarkDiv.style.height = `${watermarkHeight}px`;
            watermarkDiv.style.textAlign = 'center';
            watermarkDiv.style.fontSize = '20px';
            watermarkDiv.style.color = 'rgba(0, 0, 0, 0.1)';
            watermarkDiv.style.zIndex = '-1';
            watermarkDiv.style.pointerEvents = 'none';
            watermarkDiv.innerText = text;
            container.appendChild(watermarkDiv);
        }
    }
}

window.onload = function() {
    addMultipleWatermarks('Your Watermark Text');
};

*   **注意事项：**
    *   可以根据需要调整水印的样式，例如字体大小、颜色、位置等。
    *   可以使用`MutationObserver`监听页面的变化，并在页面内容发生变化时重新添加水印，以确保水印始终存在。
    *   如果水印内容包含敏感信息，需要进行加密处理，以防止泄露。

@media screen and (max-width: 768px) {
  /* 在小屏幕设备上显示较小的水印 */
  body::after {
    background-size: 50%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 在中等屏幕设备上显示中等大小的水印 */
  body::after {
    background-size: 75%;
  }
}

@media screen and (min-width: 1025px) {
  /* 在大屏幕设备上显示正常大小的水印 */
  body::after {
    background-size: 100%;
  }
}