Html 背景图像转换部分

我试图在两个有背景图像的部分之间做一个“过渡”效果

我的两个部分有两种不同的颜色，我希望添加一个云图像来隐藏我的部分之间的突然中断

问题是背景图像始终保留在其容器中。如何将其与其他部分重叠

多谢各位

部分{
高度：300px；
宽度：100%；
}
.第1节{
背景图像：url（'https://s-media-cache-ak0.pinimg.com/originals/ee/9b/68/ee9b684ce8d166359272309ca2504037.png');
背景位置：底部中心；
背景重复：无重复；
背景色：红色；
}
.第2节{
背景颜色：蓝色；
}
身体{
保证金：0；
}

红色部分
蓝色部分

尝试使用伪元素，如：：before与z索引和定位（x和y）结合使用。

您可以将背景图像应用于身体，然后降低每个部分的不透明度，让图像通过两个部分

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>