Vue添加图片作为水印

直接上代码

把图片作为水印

javascript 复制代码
<div class="info-warp">
	<div class="image-container">
	  <img src="https://img.shetu66.com/2023/06/28/1687920981963810.png" />
	  <div class="watermark-layer">
	    <img
	      v-for="(pos, idx) in watermarkPositions"
	      :key="idx"
	      :src="watermarkImg"
	      :style="{
	        left: pos.x + 'px',
	        top: pos.y + 'px',
	        opacity: 0.4,
	        width: watermarkWidth + 'px',
	        height: 'auto',
	        position: 'absolute',
	        transform: 'rotate(-20deg)',
	        pointerEvents: 'none',
	      }"
	    />
	  </div>
	</div>
	</div>
computed: {
    watermarkPositions() {
      const containerW = 800;
      const containerH = 1492; // info-warp高度
      const arr = [];
      for (let y = 0; y < containerH; y += this.watermarkHeight + this.watermarkGapY) {
        for (let x = 0; x < containerW; x += this.watermarkWidth + this.watermarkGapX) {
          arr.push({ x, y });
        }
      }
      return arr;
    },
  },
 // 水印
      watermarkImg:'https://images.pexels.com/photos/6131296/pexels-photo-6131296.jpeg?cs=srgb&dl=pexels-quang-nguyen-vinh-6131296.jpg&fm=jpg',
      watermarkGapX: 60, // 横向间距
      watermarkGapY: 60, // 纵向间距
      watermarkWidth: 120, // logo宽度
      watermarkHeight: 43, // logo高度(按实际比例)

<style lang="scss" scoped>
.info-warp {
  width: 800px;
  height: 1492px;
  .image-container {
    position: relative;
    width: 100%;
    height: 90%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      box-shadow: 0px 5.07px 38.05px 0px rgba(0, 0, 0, 0.3);
    }

    .watermark-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
  }
}
</style>

替换掉里面的示例图片即可

相关推荐
高斯林.神犇37 分钟前
javaWeb基础
前端·chrome
用户214118326360241 分钟前
dify案例分享-Qwen3-VL+Dify:从作业 OCR 到视频字幕,多模态识别工作流一步教,附体验链接
前端
南屿im1 小时前
把代码变成“可改的树”:一文读懂前端 AST 的原理与实战
前端·javascript
mxd018481 小时前
最常用的js加解密之RSA-SHA256 加密算法简介与 jsjiami 的结合使用指南
开发语言·javascript·ecmascript
charlie1145141911 小时前
从《Life of A Pixel》来看Chrome的渲染机制
前端·chrome·学习·渲染·浏览器·原理分析
HWL56791 小时前
输入框内容粘贴时 &nbsp; 字符净化问题
前端·vue.js·后端·node.js
梦6501 小时前
JQ 的 AJAX 请求方法
前端·ajax
ObjectX前端实验室2 小时前
【react18原理探究实践】分层解析React Fiber 核心工作流程
前端·react.js
IT_陈寒2 小时前
「JavaScript 性能优化:10个让V8引擎疯狂提速的编码技巧」
前端·人工智能·后端
ObjectX前端实验室3 小时前
【react18原理探究实践】scheduler原理之Task 完整生命周期解析
前端·react.js