前端项目中想要在图片中添加文字，方法有两种：1、js；2、css。第一种方法比较复杂，主要是写将图片与文字组合成新的图片的js代码，第二种方法简单粗暴，这里只讲第二种方法。

       利用css在图片中添加文字，将图片设置成背景即可，代码如下：

<template>
        <div class="picture">
                <p id="p1">九寨沟</p>
                <p id="p2">人间天堂</p>
        </div>
</template>
<style type="text/css">
        .picture {
                background: url('/static/images/pic.jpg')  no-repeat;  //设置背景图片来源
                background-size: 100% 100%;  //将图片全屏展示
                width: 100%;   //图片的宽度适配整个界面
                height: 220px;  //设置图片高度
        }
        #p1 {
                line-height: 180px;  //整行文字的高度
                margin-left: 170px;  //文字距离左边距的长度
                font-size: 22px;  //字体大小
                color: rgb(255,255,255);  //字体颜色
        }
        #p2 {
                line-height: 0px;
                margin-top: -50px;
                margin-left: 190px;
                font-size: 22px;
                color: rgb(255,255,255);
        }
</style>