仅CSS视差：调整前景和背景的滚动速度，使它们同时到达底部

我正处于我的编码旅程的最开始，我被要求专门使用HTML和CSS来完成我当前的项目。任务是创建一个简单的单页网站，显示

display:flex和
弯曲方向：列并稍微玩转CSS。作为一个有足够空闲时间的挑战爱好者，我开始在我的一个寻呼机上增加视差。我还没有后悔

我想我已经理解了这条主线，但是我还没有完全掌握它的深层机制。我通过调整源代码，成功地构建了这样的东西。你可以发现我的工作正在进行中。我知道这很难看，但我真的想在设计内容之前先学习视差（难的部分在容易的部分之前）

如果你看看我的笔，你会发现，我注释掉了原始的
背景图像
，并用
线性渐变
替换了它。我的
背景图像的尺寸是1280px*960px，但我更愿意以200vh的高度显示它。我还想过剪切每一篇
文章
，以创造视觉平衡并缩短页面（我最初的目标是总高度为200vh，因此背景图像的尺寸为
）

这是我的问题。如何正确校准视差，使前景高度与背景高度相对应？更具体地说，如何调整滚动速度，使前景和背景同时达到各自的底部？它是否与我的剪辑/取消剪辑部分内容的想法兼容（这需要滚动速度适应不同的前景高度）

我有一种感觉，这两个属性
z-index:-1
变换：translateZ（-1px）比例（2）因为视频中的那个家伙解释说，具有不同索引的元素将以不同的速度滚动，但我已经花了过去几个小时在各个方向上搜索，但没有找到答案。或者也许我读了无数遍，但它还是超出了我的想象。
你发布的教程分享了sorce代码，你为什么不从那里开始呢？好的，这是复制他在视频中展示的源代码，这也是我开始做的（唯一的区别是我在观看视频时手动复制，而不是复制粘贴源代码）。但这不是我的问题。我想问的是，如何同步前景和背景的滚动速度，使它们同时到达底部。