具有绝对定位元素的视差滚动问题

Question

我正在尝试创建一个看起来像这样的网站

并且想法是在背景图像上滚动内容的视差。

我不确定将图像切割成最佳方法是什么，但我在直角三角形上使用绝对位置。

但是当我滚动时会出现闪烁效果，因此视差滚动看起来不太好。

我知道有些解决方案建议使用固定定位，但这对我的情况没有帮助。

任何人都可以向我解释一下，在背景图像上实现切割的最佳解决方案是什么，并且在其上滚动平滑的视差？

谢谢

Answer 1

您可以使用伪类在内容上创建角度边和边框。更多信息：http://lawrencenaman.com/css/responsive-slanted-divs-with-css/。

实际上你会有类似的东西（调整倾斜角度以获得你想要的外观）：

.header .skew:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
  width: 100%;
  height: 250px;
  background: #00bcd4;
  z-index: -1;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
}

所有归功于劳伦斯·纳曼（http://lawrencenaman.com/），因为这是他的解决方案而不是我的