单处水印
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermark Example</title>
<style>
.watermark-container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
background-color: #f0f0f0;
}
.watermark-container::before {
content: "真的服了";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 2em;
color: rgba(0, 0, 0, 0.1);
pointer-events: none;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="watermark-container">
这里是带有水印的内容
</div>
</body>
</html>效果：
多处水印
多处水印的实现，实际上传就是创建了一张svg格式的图片，再将这张图片作为背景图来实现。水印的具体细节可以调节svg的相关属性来实现
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watermark Example</title>
<style>
.watermark-container {
position: relative;
width: 100%;
height: 100vh;
border: 1px solid #ccc;
background-color: #f0f0f0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='30' fill='rgba(0,0,0,0.1)' transform='rotate(-45 150 150)'>真的服了</text></svg>");
background-repeat: repeat;
pointer-events: none;
}
</style>
</head>
<body>
<div class="watermark-container">
这里是带有水印的内容
</div>
</body>
</html>
效果
插入：小编自己封装了一个大文件上传的工具函数，支持切片上传、错误重试、上传进度、暂停和继续等，目前已发布在npm官网，感兴趣的可以看看。
https://www.npmjs.com/package/enlarge-file-upload?activeTab=versions
下载命令：npm i enlarge-file-upload
