利用CSS在图片中添加文字

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

效果图如下：