在網頁設計中，搜索表單是非常重要的一個元素。通過在頁面上添加搜索表單，用戶可以方便地查找他們所需要的信息。而在搜索表單上方加上圖片，不僅可以使頁面更加美觀，還可以更好地吸引用戶的注意力。下面我們就來看看如何使用CSS實現圖片上方的搜索表單。

HTML代碼：
<div class="search-container">
<img src="search-icon.png">
<form action="/search" method="get">
<input type="text" placeholder="搜索..." name="search">
<button type="submit">搜索</button>
</form>
</div>
CSS代碼：
.search-container {
position: relative;
display: inline-block;
height: 40px;
}
.search-container img {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.search-container form {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.search-container input[type="text"] {
border: none;
padding: 0 10px;
height: 100%;
width: 200px;
}
.search-container button {
border: none;
background-color: #333;
color: #fff;
padding: 0 20px;
height: 100%;
cursor: pointer;
}

首先，在HTML代碼中，我們創建了一個div容器，里面放置了一張圖片和一個表單。圖片用來作為背景，表單用來實現搜索功能。然后，在CSS代碼中，我們首先將容器設置為相對定位，并給它設定了一個高度。接著，我們將圖片設置為絕對定位，讓它覆蓋在表單上方。然后，我們將表單也設置為絕對定位，并讓它在容器的頂部和右側對齊。最后，我們用CSS樣式來美化表單和按鈕的樣式。

通過這些簡單的CSS樣式，我們就可以實現圖片上方的搜索表單了。你可以根據具體的需求調整樣式，使它更符合你的網頁設計風格。