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>

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

相关推荐
烛阴9 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化23 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月23 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom