HTML实现移动端固定悬浮半透明搜索框
时间：2018/5/9 21:33:53阅读：
Question. 问题在移动端商城系统中，我们常常看到位于页面顶部有一个搜索框，这类搜索框博主比较喜欢的是固定在页面顶部，半透明悬浮，能依稀看见部分轮播图的形式。要制作这样的搜索框，技术关键在于：fixed 搜索框定位opacity 设置透明度Solution. 解决首先我们定义一个…
Question. 问题
在移动端商城系统中，我们常常看到位于页面顶部有一个搜索框，这类搜索框博主比较喜欢的是固定在页面顶部，半透明悬浮，能依稀看见部分轮播图的形式。
要制作这样的搜索框，技术关键在于：
- fixed 搜索框定位
- opacity 设置透明度
Solution. 解决
首先我们定义一个 html 片段：
<!-- 搜索框 -->
<header class="bar">
<form name="search" class="search" id="search" action="">
<div class="search-row">
<input type="search" name="word" id="word">
<span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">搜索</span></span>
</div>
</form>
</header>
<!-- 一个背景图 实际上这里往往是轮播图 -->
<div class="background">
<img src="bg.jpg">
</div>