内容需要能够在凹陷区域中滚动后面而不会被遮挡.具体来说,我正在尝试创建这个：
最佳答案
对于透明背景,您可以使用框阴影：
原文链接：https://www.f2er.com/css/427366.html说明：
这种技术的关键是使用具有盒阴影和透明背景的伪元素来透视它.伪元素被绝对定位并且具有比容器大得多的宽度,以便(借助于边界半径)给div的底部提供平滑的插入曲线.
简单来说：div的背景是伪元素的Box-shadow.
******编辑*************************
html,body{
height:100%;
margin:0;
padding:0;
background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
background-size:cover;
}
div {
background:none;
height:50%;
position:relative;
overflow:hidden;
z-index:1;
}
div:after {
content:'';
position:absolute;
left:-600%;
width:1300%;
padding-bottom:1300%;
top:80%;
background:none;
border-radius:50%;
Box-shadow: 0px 0px 0px 9999px teal;
z-index:-1;
}