Как применить 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

Этот вопрос говорит о размытии Можете ли вы размыть содержимое ниже или ниже 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>

Answer 2

  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>