添加blur滤镜后图片溢出顶部fixed菜单的解决方法咨询

当给图片加上filter: blur(8px)后，图片的模糊边缘会盖在顶部fixed定位的导航菜单上面，删掉滤镜就正常。试过z-index和给父元素加position:relative都不管用，这是因为两个关键点：

1. filter属性会创建新的堆叠上下文，干扰了原本的层级关系；
2. Blur的模糊效果会向外扩散，超出图片自身边界，视觉上覆盖到了导航区域。

解决步骤： #

1. 把导航菜单的堆叠层级拉满

给fixed的导航菜单加个足够大的z-index，确保它能压在所有内容上面：

.dws-menu{
    /* 原有样式保留 */
    z-index: 9999; /* 新增这一行 */
}

2. 裁剪图片的模糊溢出部分

给图片的父容器开overflow: hidden，再把图片稍微放大一点，这样模糊的边缘就会被父容器裁掉，不会跑到导航区域：

.basketbalbg{
    /* 原有样式保留 */
    overflow: hidden; /* 新增 */
}
.basketbalphoto{
    /* 原有样式保留 */
    transform: scale(1.1); /* 新增，放大图片抵消裁剪的影响 */
    width: 100%; /* 新增，确保图片填满父容器 */
}

修改后的核心代码片段 #

/* 导航菜单 */
.dws-menu{
    border-radius: 40px;
    background-color: white;
    height: 8%;
    width: 100%;
    position: fixed;
    top: 0;
    border: 1px solid #000;
    z-index: 9999;
}

/* 图片容器 */
.basketbalbg{
    margin-top: 100px;
    overflow: hidden;
}

/* 模糊图片 */
.basketbalphoto{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    filter: blur(8px);
    transform: scale(1.1);
    width: 100%;
}

内容的提问来源于stack exchange，提问作者максим гурко