前端实战：给页面添加优雅的水印效果
在web开发中，我们经常碰到一些场景需要在页面上添加水印效果，无论是为了保护版权内容，还是为了展示品牌标识。水印不仅为内容提供了额外的安全层，还是一种有效的品牌宣传手段。本文将通过实际案例，深入探讨如何使用前端技术给页面添加水印效果，同时保证用户体验的优雅性。
一、理解水印的作用和类型
水印通常以半透明的形式覆盖在图片、文档或网页上，它们可以是文字、图案或者两者的组合。水印的作用主要包括：
- 版权保护：表明内容的所有者，防止未经授权的复制和使用。
- 品牌宣传：在内容中嵌入品牌标识，提高品牌曝光度。
- 信息追踪：在内部文档中加水印以追踪泄露源。
在web前端中，水印通常以两种形式存在：图片水印和背景水印。图片水印直接作用于图片本身，而背景水印则作为页面背景的一部分。
二、技术选型与准备
在前端实现水印效果，我们主要依赖HTML、CSS和JavaScript。HTML用于搭建页面结构，CSS负责样式和布局，而JavaScript则用来处理动态效果和交互。
2.1 准备水印素材
首先，我们需要一张水印图片。这张图片应该是半透明的PNG格式，这样可以保证水印在覆盖在页面上时不会完全遮挡内容。
2.2 页面结构规划
在HTML中，我们可以使用<div>元素来承载水印。通常，这个<div>会被放置在页面的最顶层，以确保水印能够覆盖所有内容。
<body> <div id="watermark"></div> <div id="content"> <!-- 页面主体内容 --> </div> </body>
三、使用CSS实现基本水印效果
CSS是实现水印效果最直接的方式之一。通过设置背景图片和透明度，我们可以轻松地为页面添加水印。
3.1 设置水印样式
#watermark { position: fixed; /* 固定定位，确保水印不随页面滚动 */ top: 0; /* 水印距离页面顶部0距离 */ left: 0; /* 水印距离页面左侧0距离 */ width: 100%; /* 水印宽度占满全屏 */ height: 100%; /* 水印高度占满全屏 */ background-image: url('path/to/watermark.png'); /* 指定水印图片路径 */ background-repeat: repeat; /* 平铺水印图片 */ background-size: auto; /* 自适应大小 */ opacity: 0.5; /* 设置透明度，使水印半透明 */ z-index: 9999; /* 设置层级，确保水印显示在页面内容之上 */ pointer-events: none; /* 允许点击穿透水印，不影响页面交互 */ }
3.2 注意事项
- 确保水印图片的路径正确，否则背景图片无法显示。
background-repeat属性可以根据需要设置为repeat、repeat-x、repeat-y或no-repeat。background-size可以根据需要设置为具体的像素值、百分比或者cover、contain。
opacity属性用于控制水印的透明度，值范围从0（完全透明）到1（完全不透明）。
四、使用JavaScript增强水印功能
虽然CSS能够实现基本的水印效果，但在某些场景下，我们可能需要用JavaScript来动态控制水印的显示与隐藏，或者实现更复杂的水印逻辑。
4.1 动态添加水印
function addWatermark(imageUrl) { const watermark = document.getElementById('watermark'); watermark.style.backgroundImage = `url(${imageUrl})`; } // 调用函数，添加水印 addWatermark('path/to/watermark.png');
4.2 动态移除水印
function removeWatermark() { const watermark = document.getElementById('watermark'); watermark.style.backgroundImage = 'none'; } // 调用函数，移除水印 removeWatermark();
4.3 根据条件显示水印
有时候，我们可能希望根据用户的权限或者页面的状态来决定是否显示水印。
function toggleWatermark(show) { const watermark = document.getElementById('watermark'); if (show) { watermark.style.display = 'block'; } else { watermark.style.display = 'none'; } } // 调用函数，根据条件显示或隐藏水印 toggleWatermark(true); // 显示水印 toggleWatermark(false); // 隐藏水印
五、vue3中通过自定义指令为某一个div添加水印效果
您的三连支持是我创作的动力！
这里写一个简单的给页面元素添加水印背景的方法，主要是添加文字行的。
步骤1：在canvas中画出这个水印
这里我写的注释很详细了，不会的可以看看canvas的相关api。
/** * 给一个页面元素添加水印背景 * @param text 文字内容 * @param textColor 文字颜色 * @param backgroundColor 背景色 * @param sourceBody 挂载元素 */ function setWatermark({text, textColor, backgroundColor}, sourceBody) { let can = document.createElement('canvas') can.width = 150 can.height = 120 let cans = can.getContext('2d') cans.rotate(-20 * Math.PI / 180) cans.font = '15px Vedana' cans.fillStyle = textColor cans.textAlign = 'left' cans.textBaseline = 'Middle' cans.fillText(text, can.width / 20, can.height) sourceBody.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' sourceBody.style.backgroundColor = backgroundColor } export default setWatermark
步骤2：注册自定义指令
- 如果是在普通的项目里，直接调用上面的方法就可以实现简单的水印背景效果了。
- 这里重点说一下在vue中，使用自定义指令的方式：
为什么使用自定义指令？主要因为自定义指令里面带有el这个页面元素参数，所以说自定义指令主要就是用来干这个活儿的。
app.directive('w-watermark', (el, binding) => { watermark({ text:binding.value.label, textColor:"rgba(219,219,219,0.41)", backgroundColor:"#F5F6F7", },el) })
步骤3：应用自定义指令
自行改造，传入更多的参数，或者改变传入参数的方式都行！
<div class="ork-body" v-w-watermark="{label:'12321321'}"> <router-view></router-view> </div>
您的三连支持是我创作的动力！
