如何实现如图所示的自定义渐变背景及移动端适配的圆形元素布局？

核心方案 #

通过绝对定位固定圆形元素位置，结合响应式调整确保移动端适配，利用父容器的overflow: hidden裁剪溢出部分，彻底解决错位问题。

完整代码实现 #

CSS 代码 #

.hire__cta {
  background-color: #181818;
  padding: 130px 20px;
}

.hire-developer-needs__cta {
  background: linear-gradient(90deg, #7C84F3 0%, #1522E0 93.74%);
  padding: 50px 60px;
  max-width: 1400px;
  border-radius: 20px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 圆形通用样式 */
.circle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1); /* 半透明白色适配渐变背景 */
  z-index: 0; /* 置于文本下方 */
}

/* 单个圆形定位与尺寸 */
.circle-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -100px;
}

.circle-2 {
  width: 180px;
  height: 180px;
  bottom: -60px;
  left: -60px;
}

.circle-3 {
  width: 120px;
  height: 120px;
  bottom: 40px;
  right: 200px;
}

/* 文本容器层级高于圆形 */
.hire-developer-needs__cta-info {
  position: relative;
  z-index: 1;
  max-width: 60%; /* 限制文本宽度避免布局冲突 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .hire-developer-needs__cta {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }
  
  .hire-developer-needs__cta-info {
    max-width: 100%;
  }
  
  /* 调整圆形尺寸适配移动端 */
  .circle-1 {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -80px;
  }
  
  .circle-2 {
    width: 140px;
    height: 140px;
    bottom: -40px;
    left: -40px;
  }
  
  .circle-3 {
    width: 100px;
    height: 100px;
    bottom: 20px;
    right: 40px;
  }
}

HTML 代码（保持原结构无需修改） #

<section class="hire__cta">
  <div class="container">
    <div class="hire-developer-needs__cta">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
      <div class="hire-developer-needs__cta-info">
        <h3 class="hire-developer-needs__cta-text">
          Hire experienced React Developers now for Your Needs!
        </h3>
        <p class="hire-developer-needs__cta-subtext">
          Hire React developers to get the right specialists that will cater to the needs of your project fast. Apply to us, and we’ll get back to you to define all the requirements to candidates.
        </p>
      </div>
    </div>
  </div>
</section>

关键细节说明 #

• 绝对定位：圆形脱离文档流，依托父容器的position: relative定位，不会干扰文本布局。
• 层级控制：文本容器设z-index: 1确保内容显示在圆形上方，避免被遮挡。
• 响应式调整：媒体查询中修改圆形尺寸与位置，适配移动端屏幕；也可改用vw单位（如width: 30vw）实现更流畅的适配。
• 溢出裁剪：父容器的overflow: hidden确保圆形超出容器的部分被隐藏，维持圆角容器的完整性。

内容的提问来源于stack exchange，提问作者Riverain