CSS是前端開發中常用的一種樣式表語言，可以用于控制HTML頁面的樣式和布局。在使用CSS樣式時，我們經常需要在圖片上添加文字來提高頁面的美觀性和易讀性。下面就介紹一下如何使用CSS在圖片上繪制文字。

.text-on-image {
position: relative;
}
.text-on-image p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: white;
}

以上是一段CSS樣式代碼，我們可以將其應用于HTML頁面中的圖片元素，從而在圖片上添加文字效果。其中，通過設置圖片元素的position屬性為relative，可以讓圖片成為一個相對定位的盒子。然后，通過設置文字元素的position屬性為absolute，top和left屬性為50%，可以讓文字元素居中在圖片上。最后，通過使用transform屬性的translate函數，可以使文字元素在水平和垂直方向上都偏移50%的距離，從而讓文字始終居中在圖片上。

除了以上的樣式設置，還可以根據具體的需求來進行調整。例如，可以通過設置font-size屬性來調整文字的大小，通過設置color屬性來調整文字的顏色，以實現不同的文字效果。此外，還可以使用其他屬性和值來進一步改善文字的顯示效果，例如text-shadow、text-align等。

綜上所述，CSS樣式在圖片上繪制文字是一種非常簡單、方便的方法，能夠讓網頁設計師輕松地實現各種文字效果。希望本文對你有所幫助，歡迎大家多多嘗試并探索更多的CSS樣式技巧。