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

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 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方
  • ¥15 关于生产日期批次退货退款,库存回退的问题
  • ¥15 手机应用的时间可以修改吗