Bootstrap 中的多个 CSS 叠加形状

Question

我正在尝试为我的登陆页面创建 CSS，就像我在 Figma 设计中所示的那样。该页面是在 bootstrap 5 中构建的（不确定这是否重要）。我知道这是可能的，但我很难确定我需要如何去做？

我最初的计划是创建 3 个 div .Oval1 .Oval2 .Oval3 ，然后相对定位它们并使用溢出隐藏进行剪辑。但是当我调整椭圆的大小时，它会导致山口中的所有内容变大。

我知道这样做可以看起来非常接近设计，但我只是不确定实现它的最佳方法。非常感谢您提前提供的所有帮助。

请查看屏幕截图。

<div class="col-lg-6 d-flex align-items-center login_screen_img">
                    <div class="text-white px-3 py-4 p-md-5 mx-md-4">
                        <div class="oval1"></div>
                        <div class="oval2"></div>
                      <h4 class="mb-4">We are more than just a company</h4>
                      <p class="small mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                  </div>

  .col-lg-6.d-flex.align-items-center.login_screen_img {
    background-image: url(../img/login-pg-bg.png);
    background-position: 45% 36%;
    overflow: hidden;
}


/*shape overlays*/

.oval1 {
    position: relative;
    width: 319px;
    height: 187px;
    background: #4AC676;
    opacity: 85%;
    border-radius: 50%;
    bottom: -330px;
    left: -154px;
}

.oval2 {
    position: relative;
    width: 319px;
    height: 187px;
    background: #4AC676;
    opacity: 85%;
    border-radius: 50%;
    bottom: -120px;
    left: -100px;
}

Answer 1

我会使用

<img>

标签而不是

background-image

CSS 属性。通过设置

position-absolute

、

position-relative

、

z-index

和

left

即可实现该目标。使用

bottom

 查询为不同视口大小的绿色圆圈设置不同的大小。现在，它在大多数视口尺寸上看起来很难看，但是在 

@media（即我为您编写代码时使用的视口宽度），以下代码如下所示：

使用

810px

查询使其在其他视口尺寸上看起来相似。

请参阅下面的片段。

@media

.oval1 {
  position: relative;
  width: 650px;
  height: 650px;
  background: #4AC676;
  opacity: 85%;
  border-radius: 50%;
  bottom: -60%;
  left: -10%;
}

.oval2 {
  position: relative;
  width: 450px;
  height: 450px;
  background: #4AC676;
  opacity: 50%;
  border-radius: 50%;
  bottom: -40%;
  right: -100px;
}

.oval3 {
  position: relative;
  width: 250px;
  height: 250px;
  background: #4AC676;
  opacity: 25%;
  border-radius: 50%;
  bottom: 25%;
  right: -10%;
}