### [B2实现带轮播背景的搜索](https://guaqi.com/article/52986)

**Published:** 2021-08-07T10:31:00

**Author:** 痴情妄想

**Excerpt:**  效果站从界面我们可以分析出，这是个轮播+搜索的组合形成的，也就是我们可以用B2的轮播+B2的搜索也行成这个样式。那想要达到这个效果需要做些什么呢? 往下看 首先你就要在后后台模块设置增加两个模块，如下 上面我用的是轮播的大幻灯片+搜索模块 设置如下 轮播内容用 （网址连接+幻灯图片地址+标题（适合外链到其他网站）） 搜索模块只要开启了就 这样配置好了我们回到主页可以看到是这个吊样如下图   这一步完成了，接下来的事情就是css样式的收尾工作了、 幻灯片样式 注意把zmlb改成你的轮播id .slider-heig

![B2实现带轮播背景的搜索](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)

 [效果站](https://www.rebatu.com/)从界面我们可以分析出，这是个轮播+搜索的组合形成的，也就是我们可以用B2的轮播+B2的搜索也行成这个样式。那想要达到这个效果需要做些什么呢? 往下看

首先你就要在后后台模块设置增加两个模块，如下

![B2实现带轮播背景的搜索](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)

上面我用的是轮播的大幻灯片+搜索模块 设置如下

![B2实现带轮播背景的搜索](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)

轮播内容用 （网址连接+幻灯图片地址+标题（适合外链到其他网站）） 搜索模块只要开启了就

这样配置好了我们回到主页可以看到是这个吊样如下图

![B2实现带轮播背景的搜索](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)

这一步完成了，接下来的事情就是css样式的收尾工作了、

### 幻灯片样式 注意把zmlb改成你的轮播id

.slider-height{
width: 100%!important;
}
#home-row-zmlb/\*轮播名id\*/ .wrapper{
width: 100%!important;
margin-top: -128px;
z-index: 0;
height: auto;
}
.home-row-left.content-area{
width: 100%!important;
height: auto;
border-radius: 0;
}
.home\_row.home\_row\_bg\_img {
background-size: 1920px 1249px;
background-repeat: no-repeat;
overflow: hidden;
background-position: center 0;
margin-top: -126px;
background-attachment: initial;
}
#home-row-zmlb/\*轮播名id\*/ .slider-1 .flickity-page-dots {
position: absolute;
bottom: 0;
top: 90%;
left: auto;
right: 100px;
padding: 0 .1rem .12rem 0;
font-size: 0
}
#home-row-zmlb/\*轮播名id\*/ .slider-1.slider-type-width .slider-info-box {
height: 100%;
display: flex;
justify-content: flex-end;
align-items: self-start;
flex-flow: column
}
.dot.is-selected{
width: 22px!important;
height: 26px;
margin: 0 3px;
border-radius: 8px!important;
transition-delay: 0.1s;
}#home-row-zmlb/\*轮播名id\*/ .slider-1 .flickity-page-dots .dot {
width: 10px;
height: 10px;
margin: 0 3px;
border-radius: 50%
}
/\* 幻灯片样式结束\*/

### 轮播样式记得把zmss改成你的搜索模块id

/\*搜索模块样式\*/
.search-module-form .search-button-action::after{
content: '搜索';
font-size: 22px;
width: auto;
height: auto;
}
.search-module-form ul {/\*搜索分类\*/
width: auto;
}
.search-module-form ul li {/\*分类右浮动\*/
float: left;
}
.search-module-form ul::before {
content: '';
display: block;
position: absolute;
top: -8px;
left: 25px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgb(181, 181, 181);
z-index: 2;
}
.search-module-key {
display: flex;
width: 65%;
justify-content: center;/\*剧中\*/
}
/\*//符号\*/
#home-row-zxsc .module-title:before{ content: "♢♢♢";
font-weight: 700;
position: relative;
left: -15px;
opacity: .7;

}
#home-row-zxsc .module-title:after{ content: "♢♢♢";
font-weight: 700;
position: relative;
right: -15px;
opacity: .7;

}
#home-row-zmss .search-module-title:before{ content: "//";
font-weight: 700;
position: relative;
left: -15px;
opacity: .7;}

#home-row-zmss .search-module-title:after {
content: "//";
font-weight: 700;
position: relative;
left: 15px;
opacity: .7;
}
/\*//符号\*/
.home\_row.module-search {
background-image: inherit;
position: absolute;
/\* top: -700px; \*/
text-align: center;
width: calc(50% - 0%);
margin-top: -500px;
height: auto;
left: 25%;
}.search-module-key ul li {
margin-right: 16px;
opacity: .8;
margin-bottom: 8px;
border-radius: 4px;
width: auto;
font-size: 16px;
}.picked-category,.search-module-form input{
font-size: 16px;
}.search-module-form {
background: #fff;
position: relative;
width: 75%;
border: 1px solid #fff;
background: #fff;
box-shadow: 0 10px 30px 0 rgba(0,0,0,.16);
border-radius: 10px;
}.search-module-key ul li:first-child {
width: 100px;
margin-right: 16px;
opacity: 1;
margin-bottom: 8px;
font-size: 18px;
background: none;
box-shadow: none;
/\*搜索模块样式结束\*/}

最后记得把你的头部背景设置透明或直接none即可，原文https://www.wpbkw.com/271.html

**Tags:** B2搜索, 搜索美化, 轮播美化

**Categories:** B2主题教程

**Comments:** 

**Frey:** ??????

**Quintusnetsain:** test

**AndyZGS:** ![](https://static.7b2.com/wp-content/uploads/2021/12/3449a8e3368816a94_52986_comment_drawing.png)

**野之榛:** 请问这个 顶部菜单怎么设置为半透明呢，还有这个CSS文件在哪儿修改呢

**Bb:** ?

**tfsky:** 问下怎么把头部背景设置透明

**user11039:** 挺好看的

**李贰捌:** 不错，大气  
?

**痴情妄想:** ???



---