在网页设计中，搜索表单是非常重要的一个元素。通过在页面上添加搜索表单，用户可以方便地查找他们所需要的信息。而在搜索表单上方加上图片，不仅可以使页面更加美观，还可以更好地吸引用户的注意力。下面我们就来看看如何使用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样式，我们就可以实现图片上方的搜索表单了。你可以根据具体的需求调整样式，使它更符合你的网页设计风格。