Question

所以我有一个未设置为背景的图像，但占据了整个宽度和几乎所有的高度。我想让这个图像保持在它的位置，当用户滚动时，下面的内容会滚动到图像的顶部。

我尝试使用：

position: fixed;
z-index: -1; /* Or another value */

但两者都没有或在一起工作。

我没有应用的位置或z-index：https://jsfiddle.net/hhcvmrfx/

我希望div容器显示在图像下方，并且只在用户滚动时与图像重叠。

Answer 1

要仅在用户向下滚动时重叠下面的容器，您需要为父.container设置一个填充顶部值，等于或小于相关固定图像的高度。
然后将背景颜色应用于嵌套的div元素。

body {
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  overflow-x: hidden;
}

/* Images */
#head-banner-img {
  border-bottom: 5px solid #222222;
  position: fixed;
}

/* Container Content */
.container {
    width: 100%;
    height: 500px;
    background-color: transparent;
    padding-top: 947px;
    font-size: 30px;
    text-align: center;
    position: relative;
}

.container > div {
    background: #2c2c2c;
    height: 100%;
    padding: 50px;
    box-sizing: border-box;
    color: white;
}

<img src="http://www.thestoryboardz.com/images/background.jpg" alt="Munch Banner" id="head-banner-img">
    <div class="container">
      <div>Hello</div>
    </div>

Answer 2

将div的图像设置为背景图像，并将其赋予：

background-attachment: fixed

内容滚动图像

2 个答案: