为何模糊效果未作用于文本区域？鼠标跟随特效问题求助

问题分析 #

你添加文本区域后，该区域未呈现模糊效果，核心原因是**z-index仅对position值为relative/absolute/fixed/sticky的元素生效**——你给.text设置了z-index:99，但.text默认是position:static，导致z-index完全无效，层级关系未按预期生效。

解决方案 #

只需给文本容器添加定位属性，让z-index生效，再调整层级确保模糊层与文本的显示关系符合需求：

修改后的CSS代码

body {
    background-color: black;
    height: 100vh;
    margin: 0rem;
    overflow: hidden; 
}

.text{
    color:aquamarine;
    position: relative; /* 新增：让z-index生效 */
    z-index : 99; /* 现在该属性生效，确保文本在模糊层上方 */
    padding: 2rem; /* 可选：优化文本排版 */
}

@keyframes rotate {
from {
    rotate: 0deg;
}

50% {
    scale: 1 1.5;
}

to {
    rotate: 360deg;
}
}

#blob {
background-color: white;
height: 34vmax;
aspect-ratio: 1;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
border-radius: 50%;
background: linear-gradient(to right, aquamarine, mediumpurple);
animation: rotate 20s infinite;
opacity: 0.8;
z-index: 1; /* 明确blob层级，确保在模糊层下方 */
}

#blur {
height: 100%;
width: 100%;
position: absolute;
z-index: 2; /* 模糊层处于blob和文本之间 */
backdrop-filter: blur(12vmax);
} 

HTML与JavaScript代码（无需修改）

保持你原有的HTML结构和JavaScript逻辑即可。

效果说明 #

• 文本会清晰显示在模糊层上方，同时背景能呈现blob的跟随模糊效果
• 若想让文本被模糊效果覆盖，只需把.text的z-index改为1（小于#blur的z-index:2）即可

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