滚动时如何使文本与背景图像保持固定？答案

【问题标题】：How to have text stay fixed with background image while scrolling?滚动时如何使文本与背景图像保持固定？
【发布时间】：2017-04-18 02:54:00
【问题描述】：

我有一个包含网站标题、子标题和按钮的登录页面。我用background-attachment 修复了背景图像，这样当你向上滚动时它会保持原位。

我希望我的标题、子标题和按钮保持不变，以便概览部分与其重叠。我尝试将文本设置在固定位置并制作z-index: -1，但它位于背景图像后面并出现在概述部分。 https://codepen.io/anon/pen/qmdzzz

文本被包裹在intro-text div中

@media (min-width: 768px){
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
    position: fixed;
    z-index: -1
  }
}

然后我尝试为概览部分设置更高的 z-index

#overview {
  z-index: 1000; 
}

【问题讨论】：

能否也提供html？
试试display:block 和position:fixedtogether。
<div style="position:fixed;z-index:0;">subheader button</div><div page style="position:relative;z-index:1">site content</div> 没有你的结构，很难猜测它是否相似......
抱歉忘记放密码笔了：codepen.io/anon/pen/qmdzzz

【解决方案1】：

您需要使位置相对于您的#overview。并设置背景颜色。这意味着。

#overview {background-color: #fff;position: relative}

从标题 .intro-text 中删除 z-index: -1 我还为你制作了一支笔。你可以去那里看看。

【讨论】：

【解决方案2】：

您的 .intro-text 类必须有一个属性：

position:fixed

为了与背景图像保持固定。

【讨论】：