在網頁設計中，經常需要在圖片上添加文字來增強視覺效果或說明圖片內容。然而，當文字與圖片合并時，可能會出現模糊或失真的情況，這給用戶的觀感帶來了不好的影響。所以，在此情況下，我們需要用到 CSS 的技巧來讓圖片上的字清晰。

img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto; 
}
.text-over-image {
position: relative; 
}
.text-over-image h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-shadow: 1px 1px black;
font-size: 24px;
font-weight: bold;
text-align: center;
z-index: 1;
}

上述代碼中，首先設置了圖片的最大寬度為 100% 以保持響應性，并確保實現自動高度。除此之外，對圖片進行了居中處理。接下來，對于增加文字的位置，為其設置 position: relative; 并使用相對位置來確保絕對定位的子項目可定位。在此之后，對文字進行了樣式設置，包括定位、顏色、字體大小和加粗程度等等。其中的 text-shadow 屬性是用于給文字陰影增加權重的技巧。此外，還設置了 z-index 屬性，以確保文字位于圖片之上。

補充一點的是，為了使字體變得更為清晰，還可以使用自定義字體來使其更容易讀取。此外，要確保在調整字體大小或顏色時不會失去可讀性。