如何创建使用背景渐变和重叠透明形状的嵌入曲面背景？ [英] How can I create an inset curved background that works with a background gradient and overlapping transparent shapes?

问题描述

我一直在尝试使用CSS创建一个看起来像下图的网页部分。我无法弄清楚如何在背景的顶部和底部创建曲线并保持透明覆盖的完整性。上面和下面的部分（部分显示）也使用透明背景。所以，你会看到圆圈有不同的阴影。

I have been trying to create a section of a webpage that looks like the image below with just CSS. I can not figure out how to create the curves the top and bottom of the background and keep intact the transparent overlays. The section above and below (partially shown) also use transparent backgrounds. So, you see the different shades the circles have.

推荐答案

这是我将如何尝试。它可能会让你的网站运行起来有点费力，但希望你能看到我使用的技术。

Here is how I would attempt it. It will probably take a bit of finessing to make it work for your site, but hopefully you can see the technique I used.

基本上你使用div作为背景内容并将其翻译为叠加层。然后将任何内容放在容器中，您可以更改z-index以使其高于一切。曲线本身只是一个50％的边界半径，并且倾斜的宽度大于高。然后内容的父div具有渐变颜色背景。

Basically you are using divs as the background to content and translating them to overlay. Then putting any content in a container that you can change the z-index on to bring above everything else. The curve itself is just a border-radius of 50% and skewed wider than tall. Then the content's parent div has the gradient color background.

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

I do like the simplicity of Temani's solution though.

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

这篇关于如何创建使用背景渐变和重叠透明形状的嵌入曲面背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！