在網頁設計中，我們經常會使用字體來表達網頁的主題和重點。而之前我們在討論如何在圖片上加文字時，使用了一種比較麻煩的方法——在圖片上添加文字并存儲為一個新的圖片文件。其實，我們可以使用 CSS 在圖片上方添加文字，這樣便不用每次都重新制作一個新的圖片了。

CSS 可以讓我們很方便地在圖片上面添加文字。我們可以使用“position”屬性控制文本所在位置，例如在文本元素上設置“position: absolute; top: 0; left: 0;”可以使文本顯示在圖片的左上角。

position: absolute;
top: 0;
left: 0;

要讓文本在圖片上方顯示，我們可以將文本元素的“z-index”屬性值設為比圖片元素更大的值。另外，我們可以設置文本的透明度、字體、大小和顏色等效果。

z-index: 1;
opacity: 0.7;
font-size: 24px;
color: #ffffff;

另外，我們也可以在文本元素中設置背景色和邊框樣式，以增強文本的可讀性。

background-color: rgba(0, 0, 0, 0.5);
border: 1px solid #ffffff;

總之，使用 CSS 在圖片上方添加文本，不僅方便實用，而且可以提高網頁的設計品質。希望你通過這個方法，可以更好地展示你所設計的網頁。