如何解决根据路线 Angular 更改页脚背景颜色
我有一个用作块的波浪形页脚,问题是因此,波浪的透明部分(颜色应与路线背景相同的空间)是白色的,因为它占据空间作为阻止。
这是 css:
.wave{
background: rgba(255,255,0);
height: 15px;
position: relative;
}
.wave::before,.wave::after{
border-bottom: 5px solid #69c0c0;
}
.wave::before{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background-size: 20px 40px;
background-image:
radial-gradient(circle at 10px -15px,transparent 20px,#69c0c0 21px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 15px;
background-size: 40px 40px;
background-image:
radial-gradient(circle at 10px 26px,#69c0c0 20px,transparent 21px);
}
我怎样才能改变它以仍然作为一个块,但根据它所在路线的颜色改变它的背景颜色?
解决方法
解决这个问题的最快方法是将 top
属性添加到两个伪元素,将它们的值设置为负高度,并更改 .wave
的背景。
更新了 CSS
.wave{
background: #69c0c0;
height: 15px;
position: relative;
}
.wave::before,.wave::after{
border-bottom: 5px solid #69c0c0;
}
.wave::before{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: -10px;
height: 10px;
background-size: 20px 40px;
background-image:
radial-gradient(circle at 10px -15px,transparent 20px,#69c0c0 21px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: -15px;
height: 15px;
background-size: 40px 40px;
background-image:
radial-gradient(circle at 10px 26px,#69c0c0 20px,transparent 21px);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。