在網頁設計中，我們經常需要將一些小圖標或是logo放置在輸入框的前面，從而美化網頁的視覺效果。那么，如何使用CSS實現將圖片置于輸入框上呢？下面，我們來看一下具體實現方式。

// HTML代碼
<div class="input-wrapper">
<input type="text" placeholder="請輸入內容">
<img src="icon.png" alt="圖標">
</div>
// CSS代碼
.input-wrapper {
position: relative;
margin-bottom: 20px;
}
.input-wrapper input[type="text"] {
padding-left: 40px;
}
.input-wrapper img {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
}

在上面的代碼中，我們首先將input和img元素放在一個div容器中，并將該容器設置為相對定位。接著，通過CSS選擇器來對輸入框和圖片進行樣式的設置。

對于輸入框，我們需要通過padding-left屬性來留出圖片的位置。對于圖片，我們將其設置為絕對定位，并將left屬性設置為10px，這樣圖片就會距離輸入框左側縮進10px的位置。同時，我們還需要通過top屬性和transform屬性來將圖片垂直居中。

以上就是使用CSS將圖片置于輸入框上的具體實現方法，使用該方法可以使網頁在視覺效果上更具吸引力，讓用戶的操作更加順暢。