有固定背景的时候歪斜

Question

所以我正在学习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);
}

它正在创建此错误：滚动时，容器的底部边缘始终可见，内容从底部滑入。因此，当我向下滚动时，平行四边形类型的背景形状变得越来越宽，直到它达到它的宽度然后看起来很好。想知道如何解决这个问题。我拍了一些截图来说明发生了什么。

如果您需要任何HTML标记，请与我们联系。

Answer 1

通过抛弃整个skew想法并转而使用clip-path来修复。