内容需要能够在凹陷区域中滚动后面而不会被遮挡.具体来说,我正在尝试创建这个:
最佳答案
对于透明背景,您可以使用框阴影:
说明:
这种技术的关键是使用具有盒阴影和透明背景的伪元素来透视它.伪元素被绝对定位并且具有比容器大得多的宽度,以便(借助于边界半径)给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;
}
原文地址:https://www.jb51.cc/css/427366.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。