CSS 在圖片上顯示輸入框是網頁設計中非常常見的一個操作，通過 CSS 可以將一個輸入框精確地定位到圖片的指定位置上，使得圖片和輸入框可以恰好對齊，從而達到更好的用戶體驗。

/* 示例代碼 */
/* HTML */
<div class="image-container">
<img src="example.jpg">
<div class="input-box">
<input type="text" placeholder="請輸入內容">
</div>
</div>
/* CSS */
.image-container {
position: relative;
}
.image-container .input-box {
position: absolute;
left: 100px;    /* 輸入框左上角相對于圖片左邊界的距離 */
top: 50px;      /* 輸入框左上角相對于圖片上邊界的距離 */
}

上述代碼中，利用了 CSS 中的 position 屬性，將圖片容器（.image-container）設置為相對定位（relative），再將輸入框容器（.input-box）設置為絕對定位（absolute），通過設置 left 和 top 屬性來調整輸入框在圖片上的位置。