【VUE项目】加水印

在vue项目中增加水印效果。

生成HTML

data(){
	textBgImg:''
},
 methods: {
    genTextSvg(text) {
      const svg = `<svg width='200' height='200' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'>${text}</text></svg>`
      const svgText = svg.replace('<', '%3C').replace('>', '%3E');
      this.textBgImg = `"data:image/svg+xml,${svgText}"`;
    }
  },//设置透明度 以及斜度和大小都可以

样式中使用

<div class="main-task-container" :style="{'--text-bg-img': `url(${textBgImg})`}">
  <router-view :key="accessTime"/>
</div

CSS

.main-task-container{
    background: var(--text-bg-img);
}

特此声明：感谢同事小天儿的帮助。向大佬的方向前进