首页使用html2canvans截图的页面如何添加图片水印斜铺满屏大小样式

使用html2canvans截图的页面如何添加图片水印斜铺满屏大小样式

时间: 2024-03-13 13:43:07 浏览: 106

要在使用html2canvas截图的页面上添加图片水印斜铺满屏幕大小的样式，可以通过以下步骤实现： 1. 在页面中添加一个div元素，用于承载水印图片，并设置其样式为position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;，使其覆盖整个页面。 2. 在这个div元素中添加一个img元素，用于加载水印图片，并设置其样式为position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-45deg) scale(1.5); opacity: 0.2;，其中transform属性用于将图片旋转45度并放大1.5倍，opacity属性用于设置图片的透明度。 3. 使用html2canvas截取页面时，将这个div元素的z-index属性设置为-999，以确保水印不会出现在截图中。完整的代码示例如下： ```html <!DOCTYPE html> <html> <head> <title>添加斜铺水印</title> <style> .watermark { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .watermark img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-45deg) scale(1.5); opacity: 0.2; } </style> </head> <body> <div class="watermark"> <img src="watermark.png"> </div> <div class="content">  </div> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <script> // 截图代码 html2canvas(document.body, { allowTaint: true, useCORS: true, backgroundColor: null, logging: true, onrendered: function(canvas) { // 将canvas转换成图片并保存 } }); </script> </body> </html> ``` 需要注意的是，水印图片的地址应该替换成你自己的图片地址。

阅读全文