引入CSS波浪动画后网页仅显示动画其余内容被遮挡如何解决

问题原因 #

你使用的波浪动画容器.waveWrapper设置了绝对定位铺满整个视口，默认层叠顺序高于页面中普通的静态定位文本元素，因此会将文本内容完全遮挡。同时波浪背景为深色调，默认黑色文本即使不被遮挡也会因为对比度太低难以识别。

修复方案 #

只需修改两处CSS代码即可：

1. 给波浪容器添加z-index: -1属性，将其层叠顺序降到所有普通内容下方
2. 调整body基础样式，消除默认边距、适配深色背景的文本颜色

修改后的CSS片段：

/* 新增body基础样式 */
body {
    margin: 0;
    min-height: 100vh;
    color: #ffffff;
    padding: 24px;
}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: -1; /* 新增此行，将波浪层置于底层 */
}
/* 其余原有CSS代码保持不变即可 */

修改后波浪动画会作为页面背景显示，不会遮挡上层的标题、段落等所有内容。

内容的提问来源于stack exchange，提问作者Vansh