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

我想有一个以上的另一个图像是显示在滚动。 我想到了与本页类似的效果：（live filters部分，此处称为“固定卷轴”）

首选本机CSS解决方案或尽可能少的JS

到目前为止，我已经找到了这个例子 这几乎是我想要的，但我想不出一种方法，使背景附件固定到元素的父对象，而不是整个视口。 它只有在全屏显示时才有效，而且没有比这个效果更好的了

我也考虑过使用translate-y的解决方案，但找不到一种方法来将顶部图像向上滑动，露出下面的图像，而不是将下部图像滑动到第一个图像上

---

你能在这里帮助我吗？或者给我指出正确的方向，如何实现这一目标？谢谢

据我所知，使用

background attachment:fixed

可能是仅使用CSS实现此特定效果的唯一方法，但这似乎并不能完全解决您的问题

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

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

---

使用

data speed=“0”

当您滚动过去时，div中的图像将保持静止。

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