将一个部分的背景图像重叠到另一个部分

Question

我正在尝试创建一个与此类似的着陆页，曲线背景在背景中相互重叠，如下图所示。

着陆页的第一部分和第二部分

着陆页的第三和第四部分

所以对于这个练习，我有一些源文件来设计这个网站设计，包括你在上面的图片链接中看到的弯曲背景的图像。

用作背景的曲线图示例

我在尝试将这些弯曲的图像相互重叠时遇到了问题。我试过使用 background-image、::before 和 ::after 等技巧，但无济于事。

我目前所做的：第二部分的曲线背景不与第一部分重叠

这是我的代码：

/* ||| Start of Section of Code that deals with the curvy image */

.background-wrapper {
  /* use background wrapper instead of the section element itself because we need to use width, height which takes reference from parent element */
  position: relative;
  /* so that we can use position: absolute in ::before pseudo class */
}

.background-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* pushes our bg-img behind all content within this wrapper */
  overflow: visible;
  /* allows our bg img to flow over to the next section, which doesn't work in this case. the img gets cut off*/
  left: 0;
}

.background-video::before {
  background: url('../images/implementation-roadmap bg.png');
}

/* ||| End of section of code that deals with curvy image */


/* Following styling code below just explains the styling for other elements in the video section */
.video-header {
  font-size: 2.25rem;
  color: #5a1f5f;
  font-weight: 600;
  font-family: "Montserrat";
  text-align: center;
}

.video-img {
  width: 50%;
  height: 30%;
}

.social-icons {
  justify-content: center;
  list-style-type: none;
  margin-top: 10px;
  /* margin to video img */
  margin-bottom: 0;
  /* margin to video buttons */
}


/* ||| Video section social icons */

.social-icons li {
  /* general class for social icon unordered list */
  border: 1px solid rgba(0, 0, 0, 0.0);
  background-color: white;
  padding: 10px;
  border-radius: 50%;
  margin: 0 10px;
  /* separates each list item apart from each other */
}

.social-icons-white {
  /* specific to video section */
  color: rgba(0, 0, 0, 0.5);
}


/* ||| Video Section Buttons */

.group3-copy button.video-button {
  margin-top: 10px;
  /* margin to video social icons */
  background-color: #5a1f5f;
  color: #ffffff;
}

<!-- Start Video section -->
<section class='video'>
  <div class='background-wrapper background-video'>
    <h2 class='video-header'>REEFIC PROTOCOL EXPLAINED</h2>

    <img class='video-img' src="images/video-youtube.png" alt="protocol-explanation">

    <ul class='social-icons row'>
      <li><i class="fab fa-twitter social-icons-white"></i></li>
      <li><i class="fab fa-telegram-plane social-icons-white"></i></li>
      <li><i class="fab fa-medium-m social-icons-white"></i></li>
      <li><i class="fab fa-github social-icons-white"></i></li>
    </ul>

    <div class='group3-copy'>
      <button class='video-button'>WHITEPAPER</button>
      <button class='video-button'>ONE PAGER</button>
    </div>
  </div>
</section>
<!-- End Video section -->

如果有人对实施此类布局有更好的想法，也请告诉我！这是我第一次询问有关堆栈溢出的问题，所以如果您需要更多信息，请告诉我。

Answer 1

嗯。您可以像这样连续指定多个图像以重叠背景图像：

{background: url('a.png'), url('b.png'), url('c.png');}

如果您需要指定更多属性，则类似：

{background: round space center url('cow.jpg'),
             top left / 10% 80px repeat url('tile.jpg'), 
             green;
 background-attachment: local, fixed;}

如果要混合它们，请使用“background-blend-mode”属性。

Answer 2

所以我找到了一个解决方法，就是使用负边距。

因此，例如，如果我们将部分堆叠在一起，我希望第 2 部分和第 3 部分的背景图像重叠到它们前面的部分（分别是第 1 部分和第 2 部分） , 下面的代码演示了这是如何完成的。

.section-1 {
  background-image: url('img1.jpg') margin: -10%;
}

.section-2 {
  background-image: url('img2.jpg') margin: -10%;
}

.section-3 {
  background-image: url('img3.jpg')
}

<section class='section-1'>
  content here
</section>

<section class='section-2'>
  content here
</section>

<section class='section-3'>
  content here
</section>

Solved solution

我希望这也能帮助处于类似情况的任何人！

将一个部分的背景图像重叠到另一个部分

Overlap background image from one section to another

html

css

frontend

overlap