在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);
}
特此声明:感谢同事小天儿的帮助。向大佬的方向前进