滚动时覆盖图像的内容

【问题标题】：Contents overlaying the image while scrolling滚动时覆盖图像的内容
【发布时间】：2016-10-03 16:26:13
【问题描述】：

我请您先看看https://www.womentechmakers.com/ 并滚动一下。我们滚动时对图像的叠加效果是我想要做的。您能否建议使用 css/javascript 来执行此操作！谢谢！

【问题讨论】：

您好，欢迎来到 stackoverflow 并祝贺您提出第一个问题。但是，您的问题质量非常低。请查看此内容并添加更多详细信息，包括您的研究-stackoverflow.com/help/how-to-ask
另外，指向您的问题的指针 - 尝试研究“视差效应”。

【解决方案1】：

您可以使用background-attachment:fixed CSS 属性来实现此目的。下面是一个非常快速的演示：

html,
body {
  margin: 0;
  padding: 0;
}
html {
  background: url(http://lorempixel.com/800/600);
  background-attachment: fixed; /*This stops the image scrolling*/
}
body {
  min-height: 100vh;
  margin-top: calc(100vh - 100px);/*Only 100px of screen visible*/
  background: lightgray;/*Set a background*/
}

&lt;body&gt;Some text that will scroll&lt;/body&gt;

【讨论】：