如何给页面元素添加水印背景，在vue中怎么处理？

原创已于 2025-01-09 13:59:57 修改 · 3k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-07-01 11:09:42 首次发布

随笔同时被 2 个专栏收录

55 篇文章

订阅专栏

vue

19 篇文章

订阅专栏

本文介绍如何使用前端技术如HTML、CSS及JavaScript为网页添加优雅的水印效果，包括水印的基本实现、动态控制以及在Vue3中的自定义指令应用。

文章目录

前端实战：给页面添加优雅的水印效果

前端实战：给页面添加优雅的水印效果

在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>

您的三连支持是我创作的动力！