html - 转换背景和固定位置时如何摆脱重叠？

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到wrapper剪裁上部，坡度仅在底部可见。

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>