Как размыть (css) div без размытия дочернего элемента

Ответ 1

При использовании свойств blur или opacity невозможно игнорировать дочерний элемент. Если вы примените какое-либо из этих свойств к родительскому элементу, оно автоматически применится и к дочерним элементам.

Существует альтернативное решение: создайте два элемента внутри родительского div - один div для фона и другой div для содержимого. Установите position:relative в родительский div и установите position:absolute; top:0px; right:0px; bottom:0px; left:0px; (или установите высоту/ширину на 100%) дочернему элементу для фона. Используя этот метод, содержимое div не будет влиять на свойства фона.

Пример:

<div id="parent_div" style="position:relative;height:100px;width:100px;">
  <div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div>
  <div id="textarea">My Text</div>
</div>

Ответ 2

Просто создайте два деления и скорректируйте их z-индексы и поля, чтобы деление, которое вы хотите размыть, находится ниже подразделения, которое вы хотите отображать сверху.

PS: Не создавайте деление внутри деления, потому что ребенок наследует родительские свойства.

#forblur {
  height: 200px;
  width: 200px;
  background-color: blue;
  margin: auto;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px) -ms-filter: blur(3px);
  filter: blur(3px);
  z-index: -1;
}

#on-top-container {
  margin: auto;
  margin-top: -200px;
  text-align: center;
  height: 200px;
  width: 200px;
  z-index: 10;
}

<div id="forblur">
</div>
<div id="on-top-container">
  <p>TEXT</p>
</div>