前言
水印可以用于保护内容的版权，提供额外信息，或者美化页面。正好最近公司也有这个需求，所以借此深入探讨几种常见的前端水印方案，帮助大家更好地理解如何实现水印效果。
1. 使用 CSS 重复背景图片
使用 CSS 来添加重复水印的方法是将水印图片作为背景图片，并使用 background-repeat 属性来实现重复效果，以下是一个示例：
<!-- 示例代码 -->
<style>
.watermarked-element {
width: 100%;
height: 100%;
background-image: url('watermark.png'); /* 水印图片的 URL */
background-repeat: repeat; /* 重复水印图片 */
opacity: 0.5; /* 设置水印透明度 */
pointer-events: none; /* 防止水印干扰用户交互 */
}
</style>
<div >
<!-- 页面内容 -->
</div>
2. 使用 CSS 伪元素添加水印
使用 CSS 伪元素是一种简单而灵活的方式来添加水印，以下是一个示例：
/* 示例代码 */
<div ></div>
.watermark::before {
content: "我是水印";
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.5;
font-size: 48px;
color: #ccc;
pointer-events: none;
}
3. 使用 SVG 图像
使用 SVG 图像创建矢量图形水印，嵌入到网页中：
<!-- 示例代码 --> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"> <text x="10" y="40" font-family="Arial" font-size="24" fill="rgba(255, 0, 0, 0.5)"> Watermark Text </text> </svg>
在这个示例中，我们使用 SVG（可缩放矢量图形）来创建水印。以下是关于 SVG 的解释：
<svg>元素用于创建 SVG 图像。<text>元素用于在 SVG 中添加文本。x和y属性用于定位文本的位置。font-family和font-size属性定义了水印的字体和大小。fill属性定义了文本的颜色和透明度。
4. 使用 Canvas 绘制水印
使用 Canvas 绘制水印是一种高度可定制的方式，以下是一个示例：
<!-- 示例代码 -->
<canvas id="watermarkCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById("watermarkCanvas");
const context = canvas.getContext("2d");
const image = new Image();
image.src = "your-image.jpg"; // 你的图片 URL
image.onload = function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
context.font = "48px Arial";
context.fillStyle = "rgba(255, 0, 0, 0.5)";
context.fillText("Watermark Text", 50, 50);
};
</script>
在这个示例中，我们创建了一个 Canvas 元素，并使用 JavaScript 来绘制水印。以下是示例中的关键点：
<canvas>元素用于创建一个画布，其中指定了宽度和高度。- 通过 JavaScript 加载了一个图片，并使用
drawImage方法将图片绘制到 Canvas 上。 - 使用
font和fillStyle属性定义了水印的字体和颜色。 - 使用
fillText方法在 Canvas 上绘制水印文本。
5. 使用第三方库
第三方库如 watermark.js 提供了便捷的水印添加方式：
<!-- 示例代码 -->
<script src="watermark.js"></script>
<script>
const watermarkConfig = {
watermarkText: "
Watermark Text",
watermarkTextFont: "24px Arial",
watermarkTextColor: "rgba(255, 0, 0, 0.5)",
};
watermark.init(watermarkConfig);
watermark.load({
watermark_x: 20,
watermark_y: 20,
});
</script>
在这个示例中，我们使用第三方库 watermark.js 来添加水印。你可以根据需要配置水印的文本、字体、颜色等属性，并使用库提供的方法进行初始化和加载。
总结
以上就是关于前端实现水印的几种方案，具体使用哪一种，大家可以根据具体项目选择适合的方法来实现水印效果。当然不论我们选择哪种方式，前提是都要注意水印不会影响用户体验。
之前在做 Vue 项目时遇到过这个需求，封装了一个方法，感兴趣的可以看一下：Vue 项目为页面添加水印效果