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>

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

相关推荐
2401_837088501 小时前
ref 简单讲解
前端·javascript·vue.js
折果2 小时前
如何在vue项目中封装自己的全局message组件?一步教会你!
前端·面试
不死鸟.亚历山大.狼崽子2 小时前
Syntax Error: Error: PostCSS received undefined instead of CSS string
前端·css·postcss
汪子熙2 小时前
Vite 极速时代的构建范式
前端·javascript
叶常落2 小时前
[react] js容易混淆的两种导出方式2025-08-22
javascript
跟橙姐学代码2 小时前
一文读懂 Python 的 JSON 模块:从零到高手的进阶之路
前端·python
前端小巷子3 小时前
Vue3的渲染秘密:从同步批处理到异步微任务
前端·vue.js·面试
nightunderblackcat3 小时前
新手向:用FastAPI快速构建高性能Web服务
前端·fastapi
每天学习一丢丢4 小时前
SpringBoot + Vue实现批量导入导出功能的标准方案
vue.js·spring boot·后端
小码编匠4 小时前
物联网数据大屏开发效率翻倍:Vue + DataV + ECharts 的标准化模板库
前端·vue.js·echarts