前端项目中想要在图片中添加文字，方法有两种：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>

效果图如下：

利用CSS在图片中添加文字

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。