[英]Change footer background color depending on route Angular
我有一個作為塊的波浪頁腳,問題是正因為如此,波浪的透明部分(顏色應該與路線背景相同的空間)是白色的,因為它作為塊占用空間。
這是 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);
}
我怎么能改變它以仍然充當一個塊,但根據它所在路線的顏色來改變它的背景顏色?
解決這個問題的最快方法是將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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.