时间戳

首页 > 解决方案 > 将背景图像从一个部分重叠到另一部分

html - 将背景图像从一个部分重叠到另一部分

问题描述

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

登陆页面的第一和第二部分

参考1

登陆页面的第三和第四部分

参考2

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

用作背景的曲线图像示例

参考文献3

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

到目前为止我所做的：第二部分的弯曲背景与第一部分不重叠

参考文献4

这是我的代码：

/* ||| 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 -->

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

标签： htmlcssfrontendoverlap

解决方案

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

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

如果要混合它们，请使用“背景混合模式”属性。

推荐阅读