在网页设计中，经常需要在图片上添加文字说明，以便更好地表达网页的意图或者展示更多的信息。有多种方法可以实现在CSS中添加文字在图片上，下面介绍几种简单的方法。

/*1.使用绝对定位*/
 .container{
position:relative;
overflow:hidden;
 }
 .container img{
display:block;
width:100%;
 }
 .container span{
position:absolute;
top:0;
left:0;
margin-top:50%;
margin-left:20%;
color:#fff;
font-size:24px;
 }
 <div class="container"><img src="picture.jpg" alt="" /><span>这是一段图片上的文字</span></div>/*2.使用margin*/
 .container{
overflow:hidden;
display:inline-block;
position:relative;
 }
 .container span{
display:block;
margin:0 auto;
width:100%;
height:100%;
text-align:center;
color:#fff;
font-size:24px;
padding-top:50%;
 }
 <div class="container"><img src="picture.jpg" alt="" /><span>这是一段图片上的文字</span></div>/*3.使用伪元素*/
 .img-container{
position:relative;
width:100%;
 }
 .img-container:after{
content: "";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:url("picture.jpg");
background-size:cover;
opacity:0.5;
 }
 .img-container span{
z-index:1;
position:absolute;
top:50%;
margin-top:-12px;
left:0;
right:0;
text-align:center;
color:#fff;
font-size:24px;
 }
 <div class="img-container"><span>这是一段图片上的文字</span></div>

以上是三种简单的方法来实现在CSS中添加文字在图片上。可以根据实际设计需求，来选择使用哪种方法。