在網頁設計中，經常需要在圖片上添加文字說明，以便更好地表達網頁的意圖或者展示更多的信息。有多種方法可以實現在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中添加文字在圖片上。可以根據實際設計需求，來選擇使用哪種方法。