vue页面，怎么在图片上显示文字

项目要求用静态页面做名片，要求使用统一的背景图片，

img


我在项目里写的页面如下

<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>

img


有帮助或启发麻烦点下【采纳该答案】，谢谢~~