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

Question

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

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

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

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

你能帮我解决这个问题或指出正确的方向，如何实现？ 谢谢！

Answer 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 内的图像将在您滚动时静止。