如何创建一个内嵌的曲线背景，使其与背景渐变和重叠的透明形状相协调？

Question

我一直在尝试使用CSS创建一个网页部分，看起来像下面的图片。我无法弄清楚如何创建背景顶部和底部的曲线，并保持透明叠加效果。上方和下方（部分显示）的部分也使用透明背景。因此，您可以看到圆圈具有不同的阴影。

- logrexton

Answer 1

我认为只使用CSS时最好的近似方法是使用radial-gradient：

.box {
  margin:50px;
  height:300px;
  background:
   radial-gradient(ellipse at top ,transparent 19.5%,#3adecf 20%, #3ae7be) top/400% 50% no-repeat,
   radial-gradient(ellipse at bottom ,transparent 19.5%, #3ae3c5 20%,#3ae7be) bottom/400% 50% no-repeat;

}

body {
 background:pink;
}

<div class="box">

</div>

或者您考虑使用 mask。

.box {
  margin:50px;
  height:300px;
  background:linear-gradient(45deg,red,blue);
  -webkit-mask:
   radial-gradient(60% 30% at top    ,transparent 98%, #fff) top   /100% 50% no-repeat,
   radial-gradient(60% 30% at bottom ,transparent 98%, #fff) bottom/100% 50% no-repeat;
  mask:
   radial-gradient(60% 30% at top    ,transparent 98%, #fff) top   /100% 50% no-repeat,
   radial-gradient(60% 30% at bottom ,transparent 98%, #fff) bottom/100% 50% no-repeat;

}

body {
 background:pink;
}

<div class="box">

</div>

- Temani Afif

Answer 2

这是我的尝试方法。为了使其适用于您的网站，可能需要进行一些微调，但希望您可以看到我使用的技术。

基本上，您正在将div用作内容的背景，并将它们转换为覆盖层。然后将任何内容放在一个容器中，您可以更改其z-index以将其置于所有其他内容之上。曲线本身只是50％的边框半径，且比高更宽。然后，内容的父div具有渐变颜色背景。

我确实喜欢Temani解决方案的简洁性。

/* top ellipse */
.top {
  border-radius: 50%;
  width: 150%;
  height: 200px;
  transform: translate(-15%, 20%);
  background: white;
}

/* content's parent container */
.mid {
  padding: 4rem;
  background: linear-gradient(-20deg, #3adecf, #3ae3c5);
}

.content {
  position: relative;
  z-index: 20;
  color: white;
  font-size: 30px;
}

/* bottom ellipse */
.bottom {
  border-radius: 50%;
  width: 200%;
  height: 200px;
  transform: translate(-25%, -20%);
  background: white;
}

.all {
  overflow-y: hidden;
  position: relative;
}

.t-circle {
  background: #00ccdd;
  position: absolute;
  top: 5%;
  right: -200px;
  z-index: 10;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  opacity: 0.2;
  pointer-events: none;
}

<div class="all">
  <div class="top">Top</div>
  <div class="mid">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien mauris, efficitur in nisi vel, gravida mollis urna. Praesent ac sem vitae neque pretium ultricies. Vestibulum id mattis neque. Nullam ultricies neque eget metus volutpat, et tempus magna commodo. Phasellus accumsan lacus nibh, at commodo elit pellentesque at. Morbi iaculis bibendum massa, sit amet accumsan felis ullamcorper a. Praesent luctus odio vel tortor finibus feugiat. Sed luctus finibus nisl, in pellentesque orci efficitur ut. Curabitur suscipit elementum aliquam. Sed vel convallis urna.
      <br><br>
        Phasellus porttitor blandit ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam elementum rhoncus diam ac rhoncus. Nunc sed lorem porttitor, placerat sem vitae, bibendum nunc. Ut dolor mi, condimentum vitae leo in, suscipit maximus risus. Morbi consequat dui eros, sit amet dapibus urna porta tempor. Fusce mollis a velit nec auctor. Donec semper elementum feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vel turpis pellentesque, ultricies metus blandit, interdum nibh. Duis malesuada dolor lacus, quis tempor erat elementum in. Pellentesque at consequat nisl. Vestibulum vel urna nec ipsum interdum pellentesque id nec magna. Mauris eu lectus posuere, aliquet justo id, pharetra nisl. 
      </div>
    </div>
  <div class="bottom">bottom</div>
  <div class="t-circle"></div>
</div>

- SurfinColin

---

真正的挑战在于透明度...你的元素使用白色背景来隐藏渐变。 - Temani Afif

是的，我同意。如果目标是让元素从渐变背后出现，那么这种方法确实行不通。另一种方法可能涉及到SVG。 - SurfinColin