前言：
眼前朋友们对“css添加图片水印”可能比较关怀，你们都需要了解一些“css添加图片水印”的相关知识。那么小编同时在网上搜集了一些关于“css添加图片水印””的相关内容，希望你们能喜欢，同学们快快来学习一下吧！当我们的项目开发完成之后通常要做一个演示网站，那么如何防止我们辛苦开发的网站被别人滥用呢？我们可以通过在网页上添加水印来注明所有人的信息，像下面这个样子。
那么如何添加水印呢，今天就来介绍三种比较常用的添加水印的方法。下面所有的网页都以若依的后台管理系统为例。
利用CSS样式添加水印
添加的水印效果如图所示
具体做法是我们定义一个水印的样式——
floating-watermark，然后在需要被添加水印的标签中引用这个样式。样式案例如下：.floating-watermark {position: fixed;//这个属性使元素相对于浏览器窗口固定定位，这意味着即使页面滚动，元素也会保持在固定位置 top: 0;left: 0;right: 0;bottom: 0;pointer-events: none;//这个属性设置了元素的背景图像。在这里，使用了一个数据URI来嵌入一个SVG图像。这个SVG图像包含了倾斜的“测试水印”文字background-image: url('data:image/svg+xml;utf8,<svg xmlns="SVG namespace" width="400" height="400"><text x="50" y="200" font-size="30" fill="rgba(0, 0, 0, 0.1)" transform="rotate(-45, 50, 200)">测试水印</text></svg>');background-repeat: repeat;z-index: 1000;//这个属性设置了水印的图层，值越大则越靠上}Canvas元素添加水印使用Canvas来创建满屏倾斜的水印文字涉及到在Vue组件中使用JavaScript来动态绘制水印。效果如下。
具体做法是在js中定义一个绘制水印的方法——drawWatermark，然后在组件的mounted生命周期钩子中调用drawWatermark方法，以确保在组件加载时绘制并显示水印。样例写法如下。
drawWatermark() {let canvas = document.createElement('canvas');const spacing = 300; // 水印间的间距canvas.width = window.innerWidth * 2; // Canvas的宽度为视口宽度的两倍canvas.height = window.innerHeight * 2; // Canvas的高度为视口高度的两倍let ctx = canvas.getContext('2d');ctx.font = '30px Arial'; // 字体大小ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 字体颜色和透明度ctx.rotate(-Math.PI / 4); // 将文字旋转45度// 在Canvas上重复绘制倾斜的文字for (let x = -canvas.width; x < canvas.width; x += spacing) {for (let y = -canvas.height; y < canvas.height; y += spacing) {ctx.fillText('测试水印', x, y);}}// 创建一个新的div元素用于显示水印const watermarkDiv = document.createElement('div');watermarkDiv.style.position = 'fixed';style.top-正在西部数码()进行交易 = '0';watermarkDiv.style.left = '0';watermarkDiv.style.width = '100%';watermarkDiv.style.height = '100%';watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL()})`;watermarkDiv.style.backgroundRepeat = 'repeat';watermarkDiv.style.pointerEvents = 'none';watermarkDiv.style.zIndex = '9999'; // 设置高z-index值document.body.appendChild(watermarkDiv);}第三方工具库添加水印最后一种方法是利用第三方工具库来实现添加水印的效果，这里我推荐
vue-watermark-directive组件。效果如图所示。
首先我们需要安装vue-watermark-directive组件。
npm install vue-watermark-directive --save
然后在项目中引用组件，修改main.js
import VueWatermark from 'vue-watermark-directive';
最后在标签中使用
<div class="app-container" v-watermark="'测试水印'">总结
这三种方法中Canvas使用灵活，CSS方法和第三方组件简单易用，大家可以根据自己项目的情况选择一种使用。
更多文章推荐公众号【程序员老J】
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
