HTML实现移动端固定悬浮半透明搜索框

HTML实现移动端固定悬浮半透明搜索框实现移动端固定悬浮半透明搜索框

主要介绍了HTML实现移动端固定悬浮半透明搜索框的相关资料,需要的朋友可以参考下

Question. 问题问题

在移动端商城系统中，我们常常看到位于页面顶部有一个搜索框，这类搜索框博主比较喜欢的是固定在页面顶部，半透明悬浮，能依

稀看见部分轮播图的形式。

要制作这样的搜索框，技术关键在于：

fixed 搜索框定位

opacity 设置透明度

<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>

header 标签为搜索框，下面的 div 为一个背景图。