我希望在滚动显示的另一个图像之上有一个图像。 我正在考虑与此页面类似的效果：https://affinity.serif.com/de/photo/（实时过滤器部分，称为＆＃34;固定滚动＆＃34;此处）。
首选原生CSS解决方案或尽可能少的JS。
到目前为止，我已经找到了这个例子https://tympanus.net/Blueprints/ScrollingLayout/ 它几乎是我想要的，但是我无法想出一种方法来将背景附件固定到元素的父级而不是整个视口。 它只有在全屏显示时才有效，并且没有超出此效果。
我也考虑过使用translate-y的解决方案，但无法找到一种方法将顶部图像向上滑动，露出下面的图像而不是在第一张图像上滑动下图像。
你能帮助我或指出正确的方向，如何实现这一目标？谢谢！
答案 0 :(得分：0)
据我所知，使用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中的图像将是静止的。