css - 如何将 CSS 模糊滤镜应用于背景(而非图像)

Question

我的自动完成下拉菜单充满了几乎纯色的背景色

.Suggestions {
  text-align: left;
  position: absolute;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: rgba(235, 235, 235, 0.95);
  list-style: none;
  margin-top: -9px;
  max-height: 143px;
  overflow-y: auto;
  padding-left: 0;
  width: 406px;
}

激活时覆盖其他元素(按钮、输入...)

停用

激活

我想在单击 url 时产生类似于 safari 下拉菜单的效果，其中后面的所有内容几乎都可见并且也模糊。

有什么方法可以在 css 中做到这一点吗？我知道我可以创建一个图像，然后应用模糊滤镜，但自动完成功能用于许多具有不同背景的屏幕，因此为每个屏幕创建图像将是一项艰巨的任务

Answer 1

  function myFunction() {
    var Textfield  = document.getElementById("Textfield");
   
    if (Textfield.value == "")
      document.getElementById("back_div").classList.remove("blur");
    else
      document.getElementById("back_div").classList.add("blur");

  }

 .blur {
      /* Add the blur effect */
      filter: blur(2.5px);
      -webkit-filter: blur(2.5px);
    }

  <input id="Textfield" onkeyup="myFunction()" type="text">
  <div id="back_div">test text</div>