CSS是前端開發中一個重要的技能，他是決定網頁樣式的主要手段之一。

在網頁設計中，我們經常需要在圖片上覆蓋文字，以便突出圖片的主題或傳達一些重要的信息。 在這種情況下，我們可以使用CSS技術輕松實現圖片上文字的覆蓋效果。

/* 先定義一個包含圖片和文字的容器 */
文字內容
/* 接著進行樣式設置 */
.container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
/* 借助 opacity 和背景色實現黑色透明層效果 */
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
/* 通過鼠標懸浮事件實現文字顯示 */
transition: opacity 0.5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.overlay p {
font-size: 1.5rem;
margin-top: 10%;
}

以上代碼中，我們使用了一個container作為圖片和文字的容器，并且通過position: relative讓其成為相對定位元素，然后通過position: absolute將覆蓋文字的overlay作為絕對定位元素，top和left設置為0以使其覆蓋在圖片之上。接著，我們設置了文字的樣式，包括顏色、大小和垂直位置。最后，我們使用opacity和背景色實現了黑色透明層效果，并通過鼠標懸停事件實現了文字的顯示效果。

在實際開發過程中，我們可以根據實際需要調整容器和文字的樣式，以達到最佳效果。