CSS模板制作圖片加文字是網頁設計中一個基本的技巧。它可以讓網頁更加生動有趣，同時也能吸引用戶的注意力。本文將介紹如何使用CSS制作圖片加文字效果。

/*樣式代碼開始*/
.container{
position:relative; /*讓子元素相對于該元素定位*/
width:300px;
height:200px;
}
.container img{
width:100%;
height:100%;
}
.container p{
position:absolute; /*定位到容器上*/
bottom:0; /*距離底部為0*/
left:0; /*距離左邊為0*/
width:100%; /*寬度等于容器*/
background:rgba(0,0,0,0.5); /*設置背景透明度*/
padding:5px; /*設置文字邊距*/
color:#fff; /*設置文字顏色*/
}
/*樣式代碼結束*/

以上代碼實現了一個容器（class="container"），里面有一張圖片和一段文字。圖片會自適應容器大小，文字會顯示在圖片下方（距離底部為0），文字背景透明度為50%（rgba(0,0,0,0.5)），文本顏色為白色（#fff）。現在，我們將所有內容放在div容器中。

文字描述

以上就是CSS模板制作圖片加文字的過程，我們可以根據實際需求修改樣式代碼和HTML代碼來達到更好的效果。