背景图固定内容超出可滑动

最新推荐文章于 2024-06-14 09:48:40 发布

原创最新推荐文章于 2024-06-14 09:48:40 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#背景固定内容可滑动 #背景固定 #纵向滑动 #纵向超出可滑动

html+css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在网页设计中实现背景图片固定，而主要内容区域可以纵向滑动超过背景区域。通过HTML和CSS的设置，主要内容部分（main）保持对背景的相对定位，且内容item-box部分允许根据内容自适应高度。

背景固定内容可滑动

main内容是对背景的设置；内容item-box部分没有设置高度，是根据内容进行的自适应高度。

html

<div class="main">
    <div class="item-box">
    </div>
  </div>

css


html, body, span, div, ul, li, header {
    padding: 0;
    margin: 0;
}
body,html{
  width: 100%;
  height: 100%;
}

.main{
  width: 100%;
  height: 100%;
  background: url(../image/yykc/yuyuebj.png) no-repeat;
  background-size: 100% 100%;
}
/*内容*/
.item-box{
  width: 100%;
  height: 100%;
  padding-top: 0.5rem;
  overflow: hidden; //主要代码
  overflow-y: scroll; //主要代码
}