背景过滤器：模糊不适用于下拉背景答案

【问题标题】：Backdrop-filter: blur not working on dropdown backrgound背景过滤器：模糊不适用于下拉背景
【发布时间】：2022-03-21 18:08:28
【问题描述】：

我正在尝试将背景过滤器：模糊应用于我的下拉背景，但它不起作用。我对导航栏背景做了同样的事情，而且效果很好。为什么它在下拉列表中也不起作用？

HTML：

#navbar #menu-buttons .cell-middle {
  display: table-cell;
  vertical-align: middle;
  padding: 0 50px;
}

#nav #navbar #menu-buttons .cell-middle .dropdown .dropbtn {
  padding: 44px 20px;
}

#nav #navbar #menu-buttons .cell-middle .dropdown {
  position: relative;
  display: inline-block;
  filter: blur(0px);
}

#nav #navbar #menu-buttons .cell-middle .dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(253, 255, 252, 0.5);
  backdrop-filter: blur(20px);
  left: -60px;
  top: 74px;
  min-width: 160px;
  padding: 40px 0;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

<div id="navbar">
    <img class="logo" src="qLogo.svg" alt="logo" />
    <div id="menu-buttons">
      <div class="cell-left"><a href="#">.home</a></div>
      <div class="cell-middle">
        <div class="dropdown">
          <a href="#" class="dropbtn">.work</a>
          <div class="dropdown-content">
            <a href="logos.html">Logo design</a>
            <a href="illustrations.html">Illustrations</a>
          </div>
        </div>
      </div>
      <div class="cell-right"><a href="contact.html">.contact</a></div>
    </div>
  </div>

您可以在此处查看示例：https://codepen.io/sodelll/pen/VwbqexY

这里顶部的图像（后面是红色的 div）是我想要实现的，底部是我的代码中实际发生的。

【问题讨论】：

您能否发布一张图片，说明发生的事情与您想要发生的事情？您的 codepen 缺少图像，并且不是很有帮助。
我编辑了帖子，添加了一张照片来更好地解释我需要实现的目标。

标签： html css

【解决方案1】：

我猜你正在寻找这个

  body {
background-image: url('https://cdn-media-2.freecodecamp.org/w1280/5f9c9cfc740569d1a4ca3543.jpg');
background-size: cover;
/* background-position: center; */
background-repeat: no-repeat;
     }

ul {
 margin: 5px;
 padding: 5px;
 list-style: none;
 font-family: arial;
 
 
}

ul li {
 float: left;
 width: 200px;
 height: 45px;

 background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.1); /* Black w/opacity/see-through */
 /* background-color: transparent; */ /* uncomment this to make it complete transparent*/
 opacity: .90;
 line-height: 40px;
 text-align: center;
 font-size: 20px;

 
}

ul li a {
 text-decoration: none;
 color: rgb(255, 255, 255);
 display: block;
}

ul li a:hover {
 background-color:rgba(0,0,0, 0.2);
}

ul li ul li{
 display: none;
}

ul li:hover ul li {
 display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    


<ul>

   <li><a>Contact</a>
    <ul>
    <li><a href="">User</a></li>
   <li><a href="">Phone number</a></li>
   <li><a href="">whatever</a></li>
   <li><a href="">Something</a></li>
   


   
  
  </ul>
   <li><a>Work</a>
    <ul>
    <li><a href="">Company</a></li>
   <li><a href="">Something</a></li>
   <li><a href="">BigComp.</a></li>
   <li><a href="">Something</a></li>
   
   
   </ul>


</body>
</html>

如果我帮助你，请验证我的回答

【讨论】：

等待几分钟。
我编辑了帖子，添加了一张照片来更好地解释我需要实现的目标。
ok，现在可以理解了。
对不起，我在这里花了很长时间才更新了我的代码检查这个。
它并没有真正满足我的需求。我想将鼠标悬停在我的案例中的“.work”按钮上，然后弹出一个下拉菜单。下拉菜单的背景需要具有 50% 左右的透明度，并且它后面的所有内容都需要模糊，正如我在照片示例中展示的那样