单处水印
代码
- <!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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
