CSS輸入框是一個非常常用的UI組件，我們可以通過添加一張圖片的方式來讓輸入框更具有吸引力和可讀性。下面就來看一下如何在CSS輸入框中添加圖片。

/* HTML代碼 */
<input type="text" class="img-input">
/*CSS代碼 */
.img-input {
background-image: url("image.png"); /* 添加圖片 */
background-size: 20px; /* 設置圖片大小 */
background-position: 10px center; /* 設置圖片位置 */
background-repeat: no-repeat; /* 去除圖片重復 */
padding-left: 40px; /* 設置左側內邊距 */
}

上面的代碼中，我們將圖片作為輸入框的背景來添加，這樣可以避免影響到輸入框中的文字。其中，background-image屬性用來設置背景圖片的路徑，background-size用來設置圖片的大小，background-position用來設置圖片的位置，background-repeat則是用來控制是否重復圖片。最后，我們?yōu)檩斎肟虻淖髠燃由狭艘欢ǖ膬冗吘啵源_保文字與圖片之間有一定的空隙。

通過上述的操作，我們可以輕松地給CSS輸入框添加圖片，并且靈活掌控圖片的大小和位置，讓輸入框更加美觀易讀。