mui内置有H5版本的透明渐变导航控件，教程参考；透明渐变导航是一种解决滚动条通顶的变通方案，相比双webview，具有更高的性能和更好的动画效果；
下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果，具体内容详情如下所示：
首先声明：由于backgroundColor的值采用的是RGBA，IE8及以下不支持，所以此效果不支持IE8及以下的浏览器
css代码
Box {
height:30px;
border-radius:20px;
top:10px;
overflow:hidden;
z-index:10;
}
.search-Box:after {
content:'';
display:block;
width:100%;
height:30px;
background:#fff;
opacity:.5;
position:absolute;
top:0;
left:0px;
z-index:-1;
}
#shop-input {
height:28px;
line-height:28px;
font-size:16px;
position:absolute;
top:0;
left:30px;
}
.shop-search {
width:16px;
height:16px;
position:absolute;
top:7px;
left:6px;
}
.layer-return{
background: url(images/return.png) no-repeat center center/12px 20px;
}
.layer-share{
background: url(images/share.png) no-repeat center center/20px 30px;
}
a {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.module-content{
min-width: 320px;
max-width: 750px;
width: 100%;
margin: 0 auto;
background: #fff;
}
.module-content div:first-child img{margin-top: 0;}
.module-content div img{
display: block;
width: 100%;
margin-top: 10px;
}
HTML代码
Box">
