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

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>