在編寫網頁時，常常會為了美觀和易用性考慮，在input框中加入圖片。CSS中提供了多種方法來實現這一功能。 使用background-image屬性，可以為input框設置背景圖片。下面是一段示例代碼：

input[type="text"] {
background-image: url("image.jpg");
padding-left: 20px; /* 將文字距離圖片留出一定距離 */
}

上面的代碼將背景圖片設置為"image.jpg"，并將距離左側的留白設置為20像素，從而保證文字不會和圖片重疊。 除了background-image之外，還可以使用:before和:after偽元素為input框添加圖片。下面是一段示例代碼：

input[type="text"]:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url("image.jpg");
margin-right: 10px; /* 將圖片與文字之間留出一定距離 */
}

上面的代碼使用:before偽元素為input框添加了一張20x20像素的背景圖片，并將其與文字之間留出10像素的間距。 在使用以上方法實現圖片添加的同時，也需要注意網頁的加載速度和用戶體驗。過多的圖片會導致頁面加載緩慢，影響用戶體驗。因此，在添加圖片時，應該針對不同的情況進行選擇，保證頁面的速度和美觀。