背景画像の遷移セクション

Question

背景画像を持つ2つのセクション間に「トランジション」エフェクトを作成しようとしています。

私の2つのセクションには2種類の色があります。クラウドイメージを追加して、私のセクション間の突然の中断を隠したいと考えています。

キャッチすることは、背景画像が常にそのコンテナに残っていることです。他のセクションとどのようにオーバーレイするのですか？

ありがとうございます。

section { 
 
    height: 300px; 
 
    width: 100%; 
 
} 
 

 
.section1 { 
 
    background-image: url('https://s-media-cache-ak0.pinimg.com/originals/ee/9b/68/ee9b684ce8d166359272309ca2504037.png'); 
 
    background-position: bottom center; 
 
    background-repeat: no-repeat; 
 
    background-color: red; 
 
} 
 

 
.section2 { 
 
    background-color: blue; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<section class="section section1"> 
 
    <h1>Red Section</h1> 
 
</section> 
 

 
<section class="section section2"> 
 
    <h1>Blue section</h1> 
 
</section>

Answer 1

z屈折率及び位置決め（xとy）との組合せでのような::前擬似要素を使用してみ

Answer 2

あなたが身体に背景画像を適用することができ、次いでセクションのそれぞれの不透明度を下げて、両方のセクションを介してイメージがブリードするようにします。

Answer 3

section { 
    height: 300px; 
    width: 100%; 
} 

.section1 { 
    /* background-image: url('https://s-media-cache- ak0.pinimg.com/originals/ee/9b/68/ee9b684ce8d166359272309ca2504037.png'); 
    background-position: bottom center; 
    background-repeat: no-repeat;*/ 
    background-color: rgba(255, 0, 0, 0.5); 
} 

.section2 { 
background-color: rgba(0, 0, 255, 0.5); 
margin-top: -20px; 
} 

body { 
    margin: 0; 
} 

.test { 
    background-image: url('https://s-media-cache-ak0.pinimg.com/originals/ee/9b/68/ee9b684ce8d166359272309ca2504037.png'); 
    //background-position: bottom center; 
    background-repeat: no-repeat; 
    //background-color: red; 
    background-size: cover; 
} 

HTML：

<div class="test"> 
    <section class="section section1"> 
    <h1>Red Section</h1> 
    </section> 

    <section class="section section2"> 
    <h1>Blue section</h1> 
    </section> 
</div>