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

       利用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);

        }

效果图如下：