根据路线Angular更改页脚背景颜色

Question

我有一个波浪形的页脚作为一个块，问题是因为它，波浪的透明部分（颜色应该与路线背景相同的空间）是白色的，因为它占据了空间作为块。

1

2

3

这是 CSS：

.wave{
   background: rgba(255, 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);
 }

我怎样才能改变它以便仍然充当一个块，但根据它所在路线的颜色来改变它的背景颜色？

Answer 1

解决这个问题的最快方法是将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);
 }