头部机构如下:
<header class="mui-bar mui-bar-transparent bg">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">
<input type="search" name="" required="" placeholder="Search" >
</h1>
<a class="mui-action-back mui-icon mui-icon-phone mui-pull-right"></a>
</header>
1、header标签内添加mui-bar-transparent
2、bg用来控制下滑时,背景色渐变
完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
/* 给图片设置高度 */
#slider .mui-slider-group .mui-slider-item a img{
height: 200px;
}
.last{
height: 800px;
}
/* 改变图标的颜色 */
.mui-bar a{
color: #fff;
}
/* 输入框背景色 */
.mui-title input{
background: gray;
}
/* 向下滚动时,背景渐变 */
.bg{
background: rgba(220,20,60,0);
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-transparent bg">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">
<input type="search" name="" required="" placeholder="Search" >
</h1>
<a class="mui-action-back mui-icon mui-icon-phone mui-pull-right"></a>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="images/shuijiao.jpg"></a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#"><img src="images/cbd.jpg"></a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#"><img src="images/logo.png"></a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#"><img src="images/muwu.jpg"></a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#"><img src="images/shuijiao.jpg"></a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="images/cbd.jpg"></a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div class="last"></div>
</div>
<script src="js/mui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
mui.init();
// 有滚动条的时候必须进行加载
</script>
</body>
</html>