轉換背景和固定位置時如何擺脫重疊？

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>