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>

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

相关推荐
中微子几秒前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z9 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录17 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子17 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神18 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao19 分钟前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风20 分钟前
JS执行机制-event loop
javascript
止观止20 分钟前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂22 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神22 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript