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

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（a 设置不透明度），如下所示： 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?