同じ背景を擬似要素に固定しようとすると問題が発生する

Question

現在、私はこの問題を解決するために、壊れたミラーのように見えるヘッダーに取り組んでいます。私は同じバックグラウンドイメージを繰り返す疑似要素を使用していますさらに、私はそれが実行するミラー効果と一緒にスクロール視差効果を持つようにスキュー変換プロパティを使用しています。

問題は、ページをスクロールすると、擬似要素の背景が空白になることです。どうすれば修正できますか？

codepenリンクや画像が、以下：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    outline: none; 
 
    font-size: 100%; 
 
    font-family: "Roboto"; 
 
    text-decoration: none; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { height: 100%; } 
 

 
.mirror-header { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    background: url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat top fixed/cover; 
 
} 
 

 
.mirror-header:before, 
 
.mirror-header:after { 
 
    content: ""; 
 
    height: 200px; 
 
    position: absolute; 
 
    background-color: red; 
 
    background: inherit; 
 
} 
 

 
.mirror-header:before { 
 
    left: 0; 
 
    transform: skewY(13deg); 
 
    bottom: -80px; 
 
    width: 50%; 
 
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.6); 
 
} 
 

 
.mirror-header:after { 
 
    right: 0px; 
 
    width: 60%; 
 
    height: 280px; 
 
    transform: skewY(-10deg); 
 
    bottom: -50px; 
 
    box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.8); 
 
} 
 

 
main .content { 
 
    width: 100%; 
 
    padding: 200px 40px 40px; 
 
} 
 

 
main .content h2 { 
 
    text-align: center; 
 
    font-size: 3em; 
 
} 
 

 
main .content p { 
 
    margin-top: 20px; 
 
    text-align: justify; 
 
}

<header class="mirror-header"> 
 
    
 
</header> 
 

 
<main> 
 
    <section class="content"> 
 
    <h2>Some Title</h2> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis odit sunt, est, excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo! Excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo</p> 
 
    </section> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</main>

Scroll position bug IMAGE

Codepen Link

Answer 1

楽しいものを！

斜めになる疑似要素にはtransform-originを設定する必要があります。オフスクリーンレンダリング中に背景が正しく表示されないことがあります。 （あなたが発見したよう。）は、例えば

：

.mirror-header:after { 
    ... 
    transform-origin: 0% 100%; 
} 

.mirror-header:before { 
    ... 
    transform-origin: 100% 100%; 
} 

これを実行した後、あなたの好みに合わせて擬似要素の配置を再調整する必要があります。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    outline: none; 
 
    font-size: 100%; 
 
    font-family: "Roboto"; 
 
    text-decoration: none; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { height: 100%; } 
 

 
.mirror-header { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    background: url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat top fixed/cover; 
 
} 
 

 
.mirror-header:before, 
 
.mirror-header:after { 
 
    content: ""; 
 
    height: 200px; 
 
    position: absolute; 
 
    background-color: red; 
 
    background: inherit; 
 
} 
 

 
.mirror-header:before { 
 
    left: 0; 
 
    transform: skewY(13deg); 
 
    bottom: -180px; 
 
    width: 50%; 
 
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.6); 
 
    transform-origin: 100% 100%; 
 
} 
 

 
.mirror-header:after { 
 
    right: 0px; 
 
    width: 60%; 
 
    height: 280px; 
 
    transform: skewY(-10deg); 
 
    bottom: -150px; 
 
    box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.8); 
 
    transform-origin: 0% 100%; 
 
} 
 

 
main .content { 
 
    width: 100%; 
 
    padding: 200px 40px 40px; 
 
} 
 

 
main .content h2 { 
 
    text-align: center; 
 
    font-size: 3em; 
 
} 
 

 
main .content p { 
 
    margin-top: 20px; 
 
    text-align: justify; 
 
}

<header class="mirror-header"> 
 
    
 
</header> 
 

 
<main> 
 
    <section class="content"> 
 
    <h2>Some Title</h2> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis odit sunt, est, excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo! Excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo</p> 
 
    </section> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</main>

Working Codepenあなたの元の例からフォーク。別に

：個人的に、私はそれはおそらく、あなたの鏡の破片のためにあなたに多くの「自然な」歪み効果を与えることができるよう、この代わりにskewYためperspective/rotateYを使用しようと思いますが、それは私の$ .02です。