如何使用 css 或 js 显示底层图像答案

【问题标题】：How to reveal underlying image using css or js如何使用 css 或 js 显示底层图像
【发布时间】：2017-01-27 03:50:51
【问题描述】：

我想在滚动显示的另一张图片上方显示一张图片。我正在考虑与此页面上类似的效果：https://affinity.serif.com/de/photo/（实时过滤器部分，此处称为“固定滚动”）。

最好是原生 CSS 解决方案或尽可能少的 JS。

到目前为止，我已经找到了这个例子https://tympanus.net/Blueprints/ScrollingLayout/ 这几乎是我想要的，但我想不出一种方法将背景附件固定到元素的父级而不是整个视口。它仅在全屏时有效，并且没有任何东西超出此效果。

我也考虑过使用 translate-y 的解决方案，但找不到将顶部图像向上滑动以显示下方图像而不是在第一个图像上滑动下部图像的方法。

您能在这里帮助我或指出正确的方向吗，如何实现？谢谢！

【问题讨论】：

你的代码在哪里？
尝试检查您链接的示例的源代码，看看它们做了什么
从源代码中我可以看出它使用 Javascript 并且它使用 scrollTop 来实现滚动。由于我不是很喜欢使用 JS，所以我一直在寻找 CSS 解决方案。我在 StackOverflow 上发现的另一个示例使用完全相同的方法，但也仅适用于全屏场景。

【解决方案1】：

据我所知，使用background-attachment: fixed 可能是仅使用 CSS 实现此特定效果的唯一方法，但看起来这并不能完全解决您的问题。

我会尝试一个简单的视差滚动库，例如parallax.js。这使用 javascript 来实现所需的效果，但您可以通过 CSS 数据属性应用所有代码，如下所示：

<div id="mydiv" data-parallax="scroll" data-speed="0" data-image-src="/path/to/image.jpg"></div>

使用data-speed="0"，当您滚动过去时，div 内的图像将保持静止。

【讨论】：