在网页设计中，将全宽响应式搜索框覆盖在图片上方是提升页面交互性和视觉层次感的常用方案，这种布局既可以利用背景图片吸引用户注意力，又能让搜索功能处于页面核心位置，提升用户使用体验。
实现思路梳理
要实现这个效果，核心需要解决三个问题：第一是让背景图片和搜索框形成正确的层级关系，搜索框要显示在图片上方；第二是搜索框要占据容器的全宽，并且内部元素合理排列；第三是添加响应式规则，让搜索框在不同屏幕尺寸下自动调整样式，适配移动端和桌面端。
HTML 结构搭建
首先需要搭建基础的HTML结构，包含一个容器元素，内部放置背景图片和搜索框组件，结构如下：
<div class="search-banner">
<img src="https://picsum.photos/1200/400?random=2" alt="背景横幅图片" class="banner-img">
<div class="search-wrapper">
<input type="text" class="search-input" placeholder="请输入搜索内容">
<button class="search-btn">搜索</button>
</div>
</div>
基础 CSS 样式设置
接下来编写基础CSS样式，首先处理容器的定位，让搜索框可以相对于容器定位到图片上方：
/* 容器基础样式，相对定位作为子元素的定位参照 */
.search-banner {
position: relative;
width: 100%;
overflow: hidden;
}
/* 背景图片样式，宽度占满容器，高度自适应 */
.banner-img {
width: 100%;
height: auto;
display: block;
}
/* 搜索框容器样式，绝对定位到图片上方居中位置 */
.search-wrapper {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
padding: 0 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
}
/* 搜索输入框样式 */
.search-input {
width: 70%;
max-width: 800px;
height: 48px;
padding: 0 16px;
border: none;
border-radius: 24px 0 0 24px;
font-size: 16px;
outline: none;
}
/* 搜索按钮样式 */
.search-btn {
height: 48px;
padding: 0 32px;
border: none;
border-radius: 0 24px 24px 0;
background-color: #1890ff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.search-btn:hover {
background-color: #096dd9;
}
响应式适配规则
为了让搜索框在不同屏幕尺寸下都有良好的显示效果，需要添加媒体查询规则，针对小屏幕设备调整搜索框的尺寸和布局：
/* 屏幕宽度小于768px时的适配规则，适配移动端 */
@media screen and (max-width: 768px) {
.search-input {
width: 60%;
height: 40px;
font-size: 14px;
border-radius: 20px 0 0 20px;
}
.search-btn {
height: 40px;
padding: 0 20px;
font-size: 14px;
border-radius: 0 20px 20px 0;
}
}
/* 屏幕宽度小于480px时的适配规则，适配小屏手机 */
@media screen and (max-width: 480px) {
.search-wrapper {
padding: 0 10px;
}
.search-input {
width: 55%;
height: 36px;
font-size: 13px;
border-radius: 18px 0 0 18px;
}
.search-btn {
height: 36px;
padding: 0 16px;
font-size: 13px;
border-radius: 0 18px 18px 0;
}
}
效果优化建议
完成基础实现后，还可以根据实际需求做一些优化：
- 给背景图片添加半透明遮罩，提升搜索框文字的可读性，避免背景图片颜色过亮影响搜索框显示
- 给搜索框添加阴影效果，增强层级感，让搜索框和背景图片的区分更明显
- 给输入框添加焦点样式，当用户点击输入框时显示边框高亮，提升交互反馈
- 如果背景图片加载较慢，可以设置背景色作为占位，避免页面布局偏移
完整示例代码
以下是整合了所有样式和结构的完整示例代码，可以直接复制使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片上覆盖全宽响应式搜索框</title>
<style>
.search-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.banner-img {
width: 100%;
height: auto;
display: block;
}
.search-wrapper {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
padding: 0 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
}
.search-input {
width: 70%;
max-width: 800px;
height: 48px;
padding: 0 16px;
border: none;
border-radius: 24px 0 0 24px;
font-size: 16px;
outline: none;
}
.search-input:focus {
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.search-btn {
height: 48px;
padding: 0 32px;
border: none;
border-radius: 0 24px 24px 0;
background-color: #1890ff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.search-btn:hover {
background-color: #096dd9;
}
@media screen and (max-width: 768px) {
.search-input {
width: 60%;
height: 40px;
font-size: 14px;
border-radius: 20px 0 0 20px;
}
.search-btn {
height: 40px;
padding: 0 20px;
font-size: 14px;
border-radius: 0 20px 20px 0;
}
}
@media screen and (max-width: 480px) {
.search-wrapper {
padding: 0 10px;
}
.search-input {
width: 55%;
height: 36px;
font-size: 13px;
border-radius: 18px 0 0 18px;
}
.search-btn {
height: 36px;
padding: 0 16px;
font-size: 13px;
border-radius: 0 18px 18px 0;
}
}
</style>
</head>
<body>
<div class="search-banner">
<img src="https://picsum.photos/1200/400?random=2" alt="背景横幅图片" class="banner-img">
<div class="search-wrapper">
<input type="text" class="search-input" placeholder="请输入搜索内容">
<button class="search-btn">搜索</button>
</div>
</div>
</body>
</html>