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

Question

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

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);
 }

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

Change footer background color depending on route Angular

html

css

background

footer

angular