Css 有固定背景时的倾斜错误

因此，我正在学习Udemy（学习一些高级css）课程，并希望对其解决方案进行更改。基本上，我希望每个部分的背景图像是固定的，以创建一个很好的视差效果。不管怎样，下面的代码就是我写的

background-image: linear-gradient(
   to right bottom,
   rgba($color-primary-light, 0.75),
   rgba($color-primary-dark, 0.75)),
   url("../img/nat-4.jpg");
background-size: cover;
background-attachment: fixed;
background-position: top right;

transform: skewY(-7deg);

& > * {
  transform: skewY(7deg);
}

这就产生了一个bug：滚动时，容器的底部边缘始终可见，内容从底部滑入。所以当我向下滚动时，平行四边形的背景形状变得越来越宽，直到它达到它的宽度，然后看起来很好。我想知道如何解决这个问题。我拍了一些截图来展示正在发生的事情

---

如果您需要任何HTML标记，请告诉我。

通过放弃整个

歪斜

想法，转而使用

剪辑路径来修复。
我们始终需要HMTL:）