如何实现搜索栏背景透明并在其上叠加彩色渐变效果

开发者阿泽

2026-9-27

透明叠加色搜索栏实现方案

核心实现逻辑

不用给搜索栏设置不透明背景，通过半透明背景色配合可选的毛玻璃效果，既能叠加自定义彩色涂层，也能正常透出父元素的背景图。

实现步骤

给搜索栏的父元素设置背景图，保证父元素宽高属性正常，搜索栏作为子元素放置在父元素内
给搜索栏设置rgba格式的半透明背景色，通过调整透明度控制背景图的透出程度
可选添加backdrop-filter属性实现毛玻璃效果，让叠加涂层和背景的融合更自然

代码示例

HTML 代码

<div class="search-wrapper">
  <input type="text" class="search-bar" placeholder="搜索内容">
</div>

CSS 代码

/* 带背景图的父元素 */
.search-wrapper {
  width: 100%;
  min-height: 500px;
  background: url(你的背景图路径) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索栏核心样式 */
.search-bar {
  width: 60%;
  max-width: 500px;
  padding: 12px 18px;
  border: none;
  border-radius: 24px;
  /* 核心：半透叠加层，rgba最后一位为透明度，取值0-1，数值越小背景透出越明显 */
  /* 示例为淡蓝色叠加，可自行修改前三个RGB数值更换叠加色 */
  background: rgba(135, 206, 235, 0.28);
  /* 可选毛玻璃效果，不需要可直接删除该行 */
  backdrop-filter: blur(3px);
  font-size: 16px;
  color: #222;
  outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 搜索栏聚焦状态样式调整 */
.search-bar:focus {
  background: rgba(135, 206, 235, 0.4);
}