求助：下拉菜单中backdrop-filter: blur(20px)属性不生效

针对你的下拉菜单backdrop-filter不生效的问题，可以从以下几个方面排查和解决：

1. 添加浏览器前缀兼容不同环境 #

部分浏览器（如Safari）需要-webkit-前缀才能识别backdrop-filter属性，修改你的CSS：

#account-info-main {
  /* 原有样式保留 */
  background-color: rgba(212, 212, 212, 0.507);
  -webkit-backdrop-filter: blur(20px); /* 添加webkit前缀 */
  backdrop-filter: blur(20px);
}

2. 替换display:none的切换方式 #

display:none会让元素完全脱离文档流，切换到block时可能导致滤镜渲染异常。改用opacity和visibility实现显示隐藏：

修改后的CSS： #

#account-info-main {
  position: absolute;
  transform: translateX(-70%);
  margin-top: 1%;
  border-radius: 10px;
  height: 350px;
  width: 400px;
  /* 替换display:none为以下属性 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease; /* 可选，添加平滑过渡 */
  border: 3px solid rgb(190, 190, 190);
  background-color: rgba(212, 212, 212, 0.507);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

修改后的JS： #

function show_list_profile() {
  var dropdown = document.getElementById("account-info-main");
  if (dropdown.style.opacity === "1") {
    dropdown.style.opacity = "0";
    dropdown.style.visibility = "hidden";
  } else {
    dropdown.style.opacity = "1";
    dropdown.style.visibility = "visible";
  }
}

3. 确认元素后方有可模糊的内容 #

backdrop-filter是模糊元素后方的内容，如果菜单后面是空白页面（比如纯色背景），模糊效果会非常不明显。可以给页面添加背景图或其他元素，验证模糊效果是否正常。

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