css图片怎么添加（利用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>

效果图如下：