转换背景并固定位置时如何摆脱重叠？答案

【问题标题】：How to get rid of overlap when transforming background and having position fixed?转换背景并固定位置时如何摆脱重叠？
【发布时间】：2017-06-19 07:04:24
【问题描述】：

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

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

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 等，但目前没有任何东西对我有用。

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

【问题讨论】：

如果您将工作代码 sn-p 放在一起，我们也许可以提出修复建议
这是我能得到的最接近的：codepen.io/anon/pen/QgdXPw
你说的是红色的斜条，可以看到一半向下滚动？
不。我似乎无法在这里重现它。看起来这是一个填充问题。非常非常奇怪。非常令人沮丧。有没有更好的方法来做倾斜？
好吧，如果您无法重现它，我们将很难提供帮助

标签： html css transform

【解决方案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>

【讨论】：