您可以通过CSS(层叠样式表)为网页元素(如背景、文字等)添加水印。 以下是一些常见的方法：，，1. CSS 水印：通过 CSS 为网页元素添加水印。，2. HTML 水印：通过 HTML 代码在网页中添加水印。，3. JavaScript 水印：通过 JavaScript 在网页中添加水印。
HTML怎么加水印
在HTML中，我们可以使用CSS和HTML5的Canvas API来为网页添加水印，以下是一个简单的示例：
1、我们需要创建一个HTML文件，并在其中添加一个<canvas>元素，用于绘制水印：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML加水印示例</title>
<style>
watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.2;
}
</style>
</head>
<body>
<canvas id="watermark"></canvas>
<script>
// 在这里编写JavaScript代码
</script>
</body>
</html>
2、在<script>标签内，我们可以使用Canvas API来绘制水印文字：
const canvas = document.getElementById('watermark');
const ctx = canvas.getContext('2d');
ctx.font = '30px sans-serif';
ctx.fillStyle = 'rgba(184, 184, 184, 0.2)';
ctx.fillText('水印文字', canvas.width / 2, canvas.height / 2);
3、为了使水印文字始终保持在画布中心，我们需要计算文字的偏移量，并将其应用到translate()函数中：
function getTextWidth(text, font) {
const textMetrics = ctx.measureText(text);
return textMetrics.width;
}
function getTextOffset(text, font) {
const textWidth = getTextWidth(text, font);
return (textWidth * Math.SQRT2) / (2 * Math.tan(Math.PI / 6));
}
const watermarkText = '水印文字';
const fontSize = 30;
const offsetX = getTextOffset(watermarkText, ctx.font);
const offsetY = getTextOffset(watermarkText, ctx.font);
ctx.translate(canvas.width / 2 + offsetX, canvas.height / 2 + offsetY);
4、我们可以在页面加载完成后显示水印：
window.addEventListener('load', function() {
ctx.drawImage(canvas, 0, 0);
});
现在，当你打开这个HTML文件时，你应该能看到一个半透明的水印覆盖在页面上，你可以根据需要调整水印的颜色、字体大小、透明度等属性。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/321683.html
微信扫一扫 