添加before和after偽元素
.music::before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none; /* 添加這行孕惜，使虛化層不響應(yīng)點擊事件 */
backdrop-filter: blur(5px);
}
.music::after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none; /* 添加這行，使虛化層不響應(yīng)點擊事件 */
backdrop-filter: blur(5px);
}
.music {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: rgba(255, 2555, 255, 0.3);
transition: background-image 0.5s ease-in-out; //避免切換背景圖片閃爍
position: relative;
z-index: 2;
&_box {
height: calc(100% - 98px);
gap: 50px;
justify-content: space-around;
position: relative;
z-index: 2;
}
}
