如何创建半透明的模糊叠加层？

Question

我有两个div。其中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

有很多文章涉及这一点，这是应该起作用的：

How can I make a CSS glass/blur effect work for an overlay?

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. How can I make a CSS glass/blur effect work for an overlay?