html页面怎么加水印文字

在网页设计中，水印是一种常见的保护版权和品牌标识的方式，它可以防止他人非法复制你的网站内容，同时也能增加网站的专业感，如何在HTML页面中添加水印呢？下面我将详细介绍几种方法。

1、使用CSS背景图片

最简单的方式就是使用CSS的背景图片属性来添加水印，你可以在body标签中添加一个div，然后设置这个div的背景图片为你的水印图片，这样，无论你的网页内容如何变化，水印都会始终显示在页面的底部。

<body>
  <div class="watermark"></div>
</body>
<style>
  .watermark {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px; /* 你可以根据需要调整水印的高度 */
    background-image: url('watermark.png'); /* 这是你的水印图片路径 */
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1; /* 确保水印位于所有内容的下方 */
  }
</style>

2、使用SVG图像

SVG（可缩放矢量图形）是一种非常适合用于网页设计的图像格式，因为它可以无损地缩放，而且文件大小相对较小，你可以创建一个SVG图像作为水印，然后将其插入到你的HTML页面中。

<svg class="watermark" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="watermark" patternUnits="userSpaceOnUse" width="100" height="100">
      <image href="watermark.png" x="0" y="0" width="100" height="100"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(watermark)"/>
</svg>

3、使用JavaScript动态添加水印

如果你的网页内容是动态生成的，或者你想要在用户滚动页面时才显示水印，那么你可以使用JavaScript来动态添加水印，你可以创建一个全屏的div，然后将其设置为半透明的黑色，最后将你的水印图片设置为这个div的背景，当用户滚动页面时，你可以使用JavaScript来控制这个div的显示和隐藏。

<div id="watermark"></div>
<script>
  var watermark = document.getElementById('watermark');
  watermark.style.position = 'fixed';
  watermark.style.top = '0';
  watermark.style.left = '0';
  watermark.style.width = '100%';
  watermark.style.height = '100%';
  watermark.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  watermark.style.zIndex = '-1';
  watermark.style.display = 'none'; // 默认隐藏水印
  window.onscroll = function() {
    if (window.pageYOffset > 50) { // 如果用户向下滚动了超过50px，就显示水印
      watermark.style.display = 'block';
    } else { // 否则，隐藏水印
      watermark.style.display = 'none';
    }
  }
</script>

以上就是在HTML页面中添加水印的几种方法，你可以根据自己的需求选择合适的方法。

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/376473.html

html页面怎么加水印文字

发表回复