项目要求用静态页面做名片，要求使用统一的背景图片，
<template>
<div>
<el-image :src="url" :fit="fill">
</el-image>
</div>
</template>
<script>
export default {
name: 'Fash',
data () {
return {
// 图片路径
url: 'https://s2.loli.net/2021/12/27/jREPNUuaK2L4cQx.jpg'
}
},
}
</script>
<style lang="scss" scoped>
</style>
怎么在背景图白色的地方写文字,就是写一些类似姓名，电话，公司之类的文字
分享
div relative，然后再放一个absolute定位的层设置好left,top的值定位到白色位置的，网这个absolute定位的层加内容就可以
示例如下，加了个半透明的背景色来定位，题主自己去掉
<!doctype html>
<meta name="viewport" content="width=device-width" />
<meta name="referrer" content="no-referrer" />
<style>
@import url("https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
.mycard {
position: relative
}
.mycard .word {
position: absolute;
left: 25px;
top: 250px;
width: 275px;
height: 265px;
box-sizing: border-box;
padding: 10px;background:rgba(0,0,0,.5)
}
#app{max-width:100vh;max-height:100vh}
</style>
<div id="app">
<div class="mycard">
<el-image :src="url" :fit="fill" @load="setEL">
</el-image>
<div class="word" :style="position">
放文字的地方
</div>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<script>
var Main = {
data() {
return {
url: 'https://img-mid.csdnimg.cn/release/static/image/mid/ask/405726195046170.jpg',
el: null,
fill: 'fill',
imgSourceWidh: 2480,//原始图片宽度，计算比率用
//////原始图片空白位置大小信息
oleft: 200,
otop: 1925,
owidth: 2120,
oheight: 2075,
position: {
//计算后的值
left: 0,
top: 0,
width: 0,
height: 0
}
}
},
mounted() {
var t;
window.addEventListener('resize', () => {
clearTimeout(t);
t = setTimeout(() => {
this.resizeWordPosition();
}, 30);
});
},
methods: {
resizeWordPosition() {
//2480x4256
var rate = this.el.offsetWidth / this.imgSourceWidh;
for (var attr in this.position) {
this.position[attr] = Math.floor(this['o' + attr] * rate)+'px';
}
},
setEL(e) {
this.el = e.target;
this.resizeWordPosition();
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
分享
已结题
（查看结题原因） 12月28日
已采纳回答
12月28日
修改了问题
12月27日
创建了问题
12月27日
