banner区域图片背景注意点（移动端）

时间：2021-05-15 19:01:30 收藏：0 阅读：16

前提导航栏已经采用固定定位布局

如：

.search-index {

display: flex;

/* 固定定位跟父级没有关系它以屏幕为准 */

position: fixed;

top: 0;

left: 50%;

/* 固定的盒子应该有宽度 */

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

width: 100%;

min-width: 320px;

max-width: 540px;

height: 44px;

/* pink; */

background-color: #F6F6F6;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

技术分享图片

方法一：banner（focus）背景图父盒子应该加上一个padding-top值

.focus {
    padding-top: 44px;
}

.focus img {
    width: 100%;
}

html代码如下：

<!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>

方法二：banner（focus）背景图父盒子设置宽和高

html代码如下：

 <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>

css如下：

.banner {
  width: 15rem;
  height: 7.36rem;
}
.banner img {
  width: 100%;
  height: 100%;
}

原文：https://www.cnblogs.com/clarehjh/p/14771320.html