将背景图像从一个部分重叠到另一部分答案

【问题标题】：Overlap background image from one section to another将背景图像从一个部分重叠到另一部分
【发布时间】：2020-07-02 02:17:11
【问题描述】：

我正在尝试创建一个与此类似的登录页面，其背景中弯曲的背景相互重叠，如下图所示。

着陆页的第一和第二部分

着陆页的第三和第四部分

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

用作背景的曲线图示例

我在尝试将这些弯曲的图像相互重叠时遇到了问题。我尝试过使用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 -->

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

【问题讨论】：

标签： html css frontend overlap

【解决方案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”属性。

【讨论】：

感谢您的回答！但我不确定我将如何实现这一点。我假设您是指将所有背景图像放在 body 标记中？
是的，是可能的，但你的情况也可能是
。

【解决方案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

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

【讨论】：