用前端开发制作一个搜索框样式(<input type="text" placeholder="搜索"> <button type="submit">搜索</NOtton>)放到一张图片里面
时间: 2023-10-06 13:08:10 浏览: 41
好的,以下是一个简单的搜索框样式的前端代码,将其放到一张图片中可以使用CSS的background-image属性:
```html
<div class="search-container">
<input type="text" placeholder="搜索">
<button type="submit">搜索</button>
</div>
```
```css
.search-container {
background-image: url("your-image-url");
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 300px; /*根据图片大小自行调整*/
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px 0 0 5px;
}
button[type="submit"] {
padding: 10px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
```
你需要将上述代码中的"your-image-url"替换为你自己的图片链接。