滚动时覆盖图像的内容

时间:2016-10-03 16:26:13

标签: javascript css3

我请你先看看https://www.womentechmakers.com/然后滚动一下。 滚动时对图像的叠加效果是我想要做的。 你能建议使用css / javascript来做到这一点! 谢谢!

1 个答案:

答案 0 :(得分:0)

您可以使用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*/
}
<body>Some text that will scroll</body>