我一直在尝试使用 CSS 创建一个类似于下图的网页部分。我不知道如何在背景的顶部和底部创建曲线并保持透明覆盖层完好无损。上下部分（部分显示）也使用透明背景。因此，您会看到圆圈具有不同的阴影。
如何创建与背景渐变和重叠透明形状一起使用的插入曲线背景？
IT技术
javascript
jquery
css
frontend
2021-03-20 15:10:39
2个回答
我认为仅使用 CSS 的最佳近似值是使用radial-gradient：
或者你考虑使用 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>这是我将如何尝试。可能需要一些技巧才能使其适用于您的网站，但希望您能看到我使用的技术。
基本上，您使用 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>