CSS是前端開發中最為重要的技術之一，它可以讓網頁的呈現更加美觀和符合用戶需求。在網頁設計過程中，經常會遇到需要在圖片里添加文字的情況，下面我們就來介紹一些實現這個效果的方法。

// HTML 代碼
<div class="container">
<img src="image.jpg" alt="美食圖片">
<p class="caption">這是一道美味的意大利面</p>
</div>
// CSS 代碼
.container {
position: relative; /* 父元素需設置定位 */
}
.caption {
position: absolute; /* 子元素需設置絕對定位 */
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5); /* 設置文本背景顏色和透明度 */
color: #fff; /* 設置文本顏色 */
padding: 10px; /* 設置內邊距 */
width: 100%; /* 設置文本寬度 */
box-sizing: border-box; /* 設置盒模型 */
}

以上代碼實現了一個在圖片底部添加文本的效果。原理是將圖片和文本都嵌套在一個div容器內，在容器內使用絕對定位將文本放置在圖片底部。通過設置文本背景色和透明度，以及調整文本的樣式和布局，可讓圖片既保留其美觀性，又不失其信息性。

總之，在實現圖片添加文本的過程中，CSS是件非常實用的工具。通過良好的CSS編碼，可以讓圖片和文本的呈現效果更加美觀、簡潔、規范化。