网站加水印代码是什么html

在网页设计中，为图片添加水印可以增加图片的版权保护，防止他人未经授权使用或篡改，在HTML中，实现图片水印的效果可以通过CSS和JavaScript来完成，下面将详细介绍如何在HTML中为图片添加水印。

1. 使用CSS实现水印效果

CSS是一种用于控制网页样式的语言，可以实现简单的水印效果，以下是一个使用CSS为图片添加水印的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.watermark {
  position: relative;
  display: inline-block;
}
.watermark img {
  position: relative;
  z-index: 1;
}
.watermark:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 0;
  width: 100px;
  height: 100px;
  background-image: url('watermark.png');
  opacity: 0.3;
}
</style>
</head>
<body>
<div class="watermark">
  <img src="image.jpg" alt="Original Image">
</div>
</body>
</html>

在这个例子中，.watermark 类用于包裹图片，:after 伪元素用于在图片上添加水印。watermark.png 是水印图片的路径，opacity 属性用于设置水印的透明度。

2. 使用JavaScript实现动态水印

JavaScript可以提供更灵活的水印实现方式，允许动态添加和调整水印，以下是一个使用JavaScript为图片添加水印的示例：

<!DOCTYPE html>
<html>
<head>
<script>
function addWatermark() {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    var img = images[i];
    var watermark = document.createElement('img');
    watermark.src = 'watermark.png';
    watermark.style.position = 'absolute';
    watermark.style.top = '10px';
    watermark.style.left = '10px';
    watermark.style.zIndex = 1;
    watermark.style.opacity = 0.3;
    img.parentNode.appendChild(watermark);
  }
}
window.onload = addWatermark;
</script>
</head>
<body>
<img src="image.jpg" alt="Original Image">
</body>
</html>

在这个例子中，addWatermark 函数会在页面加载完成后被调用，为所有的 <img> 元素添加水印，水印图片通过创建一个新的 <img> 元素并设置其样式来实现。

3. 使用HTML5 Canvas实现复杂水印

HTML5 Canvas提供了强大的图形绘制功能，可以实现更复杂的水印效果，以下是一个使用Canvas为图片添加水印的示例：

<!DOCTYPE html>
<html>
<head>
<script>
function drawWatermark(canvas, image, watermark, x, y, opacity) {
  var ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  ctx.globalAlpha = opacity;
  ctx.drawImage(watermark, x, y);
  ctx.globalAlpha = 1;
}
window.onload = function() {
  var canvas = document.getElementById('canvas');
  var image = new Image();
  image.onload = function() {
    var watermark = new Image();
    watermark.onload = function() {
      drawWatermark(canvas, image, watermark, 10, 10, 0.3);
    };
    watermark.src = 'watermark.png';
  };
  image.src = 'image.jpg';
};
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

在这个例子中，drawWatermark 函数使用Canvas的drawImage方法先绘制原图，然后绘制水印。globalAlpha属性用于设置水印的透明度。

结语

以上就是在HTML中为图片添加水印的几种方法，每种方法都有其适用场景，可以根据实际需求选择合适的实现方式，无论是简单的CSS水印，还是更灵活的JavaScript动态水印，抑或是复杂的Canvas水印，都能有效地保护图片版权，防止未授权使用。

谷歌浏览器

谷歌浏览器

谷歌浏览器