Question

我正在尝试进行过渡＆＃34;两个部分之间的效果与背景图像。

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

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

谢谢。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

尝试使用:: before之前的伪元素与z-index和定位（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>

背景图像过渡部分

3 个答案: