如何在转换背景并修复位置时摆脱重叠？

Question

我有一个问题，如图中所示：

当我向下滚动时，我所拥有的背景图像（蓝色图像）会获得一个白色区域，而那个也应该是蓝色区域。蓝色背景应该是蓝色的，但是因为它是倾斜的并且我将它用作固定的背景图像，所以它不起作用，不知何故。

HTML：

<div class="wrapper">
   <p>Here comes some text and so on</p>
</div>

CSS：

.wrapper {
   background: url("myimage.png");
   background-attachment: fixed;
   transform: skewY(3deg);
   min-height: 500px;
}

你可以看到的白色背景是身体背景。它不应该存在，但它是，不知何故。当我删除background-attachment: fixed时，它可以正常工作，但我想修复它，因为我正在使用视差滚动。

所以看起来transform: skewY(3deg);和background-attachment: fixed相互阻挡。我尝试添加 z-index 等等，但目前没有什么对我有用。

有没有办法解决这个问题？

Answer 1

要修正以使斜率仅出现在底部，请使用伪。

要使skewY()向上变换，请使用transform-origin: right top;，然后将overflow: hidden设置为包装器以剪切上半部分，斜率仅在底部可见。

html, body {
  margin: 0;
}
body {
  background: red;
}
.wrapper {
  position: relative;
  height: 200px;
  width: 100%;
  min-height: 1500px;
  overflow: hidden;
}
.wrapper.nr2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
  height: 100%;
  width: 100%;
  transform: skewY(3deg);
  transform-origin: right top;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.wrapper::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
  height: 100%;
  width: 100%;
  transform: skewY(3deg);
  transform-origin: right top;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.wrapper div {
  position: relative;
  color: red;
  font-size: 30px;
}

<div class="wrapper nr2">
    <div>Some text</div>
</div>

<div class="wrapper">
    <div>Some more text</div>
</div>