a543462378 2021-12-27 16:02 采纳率: 87.9%
浏览 2714
已结题

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>

怎么在背景图白色的地方写文字,就是写一些类似姓名,电话,公司之类的文字

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-12-27 16:37
    关注

    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


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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

    报告相同问题?

    问题事件

    • 已结题 (查看结题原因) 12月28日
    • 已采纳回答 12月28日
    • 修改了问题 12月27日
    • 创建了问题 12月27日

    悬赏问题

    • ¥15 关于网上一个easyx制作的见缝插针小游戏(c++)
    • ¥15 开地址法双散列函数处理碰撞
    • ¥15 想问一下这个是什么情况 虚拟机Linux打不开了
    • ¥15 联通光猫掉注册了怎么重新注册上去
    • ¥15 关于unity开发steamvr程序遇到的问题
    • ¥60 求tc downloader的下载方式
    • ¥15 华为 快捷方式 手电筒 接口
    • ¥15 Qt6.5支不支持Android13开发啊
    • ¥20 网络只能跑一半,应该如何设置
    • ¥20 Python调用百度开发者平台人脸识别接口