当前位置：首页 > news >正文

Vue添加图片作为水印

news 2025/9/14 12:48:33

直接上代码

把图片作为水印

<div class="info-warp"><div class="image-container"><img src="https://img.shetu66.com/2023/06/28/1687920981963810.png" /><div class="watermark-layer"><imgv-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>