Как создать полупрозрачное размытое наложение?

Question

У меня есть два деления.где div1 имеет цвет фона и рисунок изображения, а div2 перекрывается прозрачным цветом фона, я хочу, чтобы фон div2 был размытым, а не его содержимым.

Я много исследовал, но не смогнайти похожий пример.

.container {
  width: 400px;
  height: 300px;
  background-color: #3d3d3d;
  position: relative;
  background-image: url('https://i.stack.imgur.com/Kpp7i.png');
  background-repeat: repeat;
  background-size: 50%;
}

.chat {
  color: green;
  line-height: 28px;
}

.type {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(45, 45, 45, 0.45);
  color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  box-sizing: border-box;
  line-height: 20px;
}

<div class="container">
  <div class="chat">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and
  </div>
  <div class="type">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'unchanged.
  </div>
</div>

Примерно так:

Answer 1

Существует множество статей, посвященных этому, вот одна из них, которая должна работать:

Как сделать так, чтобы CSS-эффект стекла / размытия работал для наложения?

1. Настройте ваше изображение.
2. Создайте div, который будет помещен поверх него, это ваш оверлей.
3. Используйте rgba (непрозрачность наборов), что-то вроде этого: background: rgba (34,34,34,0.75);

Ссылки:

1. https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
2. Как создать CSSэффект стекла / размытия для оверлея?