如何将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时，后面的所有内容几乎都是可见的，也很模糊。我想做出类似于野生动物园下拉列表的效果。

在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>

Answer 2

这个问题听起来很模糊Can you blur the content beneath/behind a div? 那里也存在不透明，这是一些丑陋的事情来证明这一点。

这有点难以回答，因为它确实取决于您的标记-CSS pure与某些JavaScript在某些情况下是非常不同的。这是一些东西。

.my-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .4em;
  background: rgba(235, 235, 235, 0.8);
  border: none;
  border-radius: 0.5em;
  padding: 1em 2em 1em 1em;
  font-size: 1em;
}


/* the triagle arrow */

.select-container {
  position: relative;
  display: inline;
}


/* the triagle arrow */

.select-container:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  pointer-events: none;
}


/* the triagle arrow */

.select-container:after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: .3em;
  right: .75em;
  border-top: 8px solid black;
  opacity: 0.5;
}

.my-select::-ms-expand {
  display: none;
}

.my-select:focus {
  outline: none;
  border-radius: 0.5em;
}

select.my-select * {
  background: rgba(235, 235, 235, 0.8);
  opacity: 0.8;
  color: lightorange;
}

select.my-select * {
  background-color: #bbeeee;
  color: #226666;
  opacity: 8;
}

select.my-select *:focus {
  background: rgba(235, 135, 100, 0.5);
  opacity: 0.8;
}

.list-container>.my-list:hover {
  opacity: 0.6;
}

.list-container .my-list li:hover {
  color: lime;
  );
}

.something {
  font-size: 2em;
  position: relative;
  top: -0.7em;
  z-index: -2
}

.my-list {
  padding-top: 0.4em;
  background: rgba(240, 240, 200, 0.9);
  border: none;
  border-radius: 0.5em;
  padding: 1em 1.5em 1em 1em;
  font-size: 1.4em;
  border: solid 0.25px green;
}

.my-list li {
  color: #227777;
  list-style-type: square;
}

.other {
  color: red;
  font-size: 2em;
  background-color: lightblue;
  position: relative;
  top: -2.5em;
  left: 1px;
  height: 3em;
  z-index: -1;
}

.test-backdrop-container {
  height: 10em;
  border: 1px dotted red;
  font-size: 2em;
  position: relative;
}

.test-backdrop {
  position: relative;
  size: 1.5em;
  top: 0.75em;
  left: 0.75em;
  border: solid blue 1px;
  background-color: #dddddd;
}

.test-backdrop {
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.8;
}

<div class="select-container">
  <select class="my-select">
    <option>one wider text</option>
    <option>two</option>
    <option>eagle</option>
    <option>canary</option>
    <option>crow</option>
    <option>emu</option>
  </select>
</div>
<div class="something">something here</div>
<div class="list-container">
  <ul class="my-list">
    <li>one wider text</li>
    <li>two</li>
    <li>eagle</li>
    <li>canary</li>
    <li>crow</li>
    <li>emu</li>
  </ul>
</div>
<div class="other">Tester out
  <input class="other-input" type="text" value="something in textbox" /> More is not more but not less
</div>
<div class="test-backdrop-container">Test Container
  <div class="test-backdrop">Test Backdrop</div>
  more text in container more test text
</div>